公司網(wǎng)站制作
公司網(wǎng)站制作響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)原理
發(fā)布：2021-03-05 12:09:15 瀏覽：2324
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)原理。一個(gè)標(biāo)準(zhǔn)的網(wǎng)頁(yè)一般由結(jié)構(gòu)（HTML, XML, XHTML）、表現(xiàn)（CSS）和行為（DOM、ECMAScript）三部分組成，其中結(jié)構(gòu)和表現(xiàn)部分則為響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的重要部分，另外CSS3標(biāo)準(zhǔn)的建立也為響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)奠定了基礎(chǔ)。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的核心技術(shù)一般由以下三部分組成：
媒體查詢(xún)又稱(chēng)為媒介查詢(xún)，即通過(guò)CSS3的@media聲明來(lái)查詢(xún)展示媒介（終端設(shè)備）的顯示尺寸，根據(jù)不同尺寸的終端設(shè)備來(lái)選擇不同的CSS樣式，從而達(dá)到網(wǎng)頁(yè)能自動(dòng)適配多種終端的效果。@media聲明從CSS3開(kāi)始才被支持，現(xiàn)在的移動(dòng)設(shè)備中的瀏覽器均支持CSS3，只有PC端的一些老舊瀏覽器不支持，如IE8以前的版本，很多網(wǎng)站已經(jīng)放棄這些老舊的瀏覽器。媒體查詢(xún)示例代碼如下：
@media screen and (min-width:768px）{這里設(shè)置您的CSS樣式代碼}
這里的網(wǎng)格布局是一個(gè)寬泛的概念，即結(jié)合了流式布局、彈性布局和柵格布局的特性，把整個(gè)網(wǎng)頁(yè)劃分成一個(gè)個(gè)網(wǎng)格，網(wǎng)頁(yè)上每個(gè)網(wǎng)格可以任意組合，最終表現(xiàn)為一個(gè)個(gè)內(nèi)容塊。通過(guò)與媒體查詢(xún)配合，同時(shí)運(yùn)用流式布局中以百分比或混合百分比作為度量單位的方式和彈性布局中Flex技術(shù)，從而實(shí)現(xiàn)網(wǎng)頁(yè)響應(yīng)式布局的效果。
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中，處理好圖片也非常重要。因?yàn)楝F(xiàn)在的網(wǎng)站往往會(huì)使用大幅圖片來(lái)展示內(nèi)容，這就需要根據(jù)終端設(shè)備的寬度來(lái)自動(dòng)調(diào)整圖片的寬度，從而達(dá)到更好的顯示效果。通常的做法是將圖片寬度以百分比來(lái)度量，配合max-width或background-size等CSS屬性來(lái)完成。
>>> 查看《公司網(wǎng)站制作響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)原理》更多相關(guān)資訊 <<<
本文地址：http://www.ccrxjh.com/news/html/24301.html
上一個(gè)：公司網(wǎng)站制作網(wǎng)站的硬件配置分析
下一個(gè)：公司網(wǎng)站制作服務(wù)廣泛化
