作者varcyan龍遨星海

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),津南企業(yè)網(wǎng)站建設(shè),津南品牌網(wǎng)站建設(shè),網(wǎng)站定制,津南網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,津南網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

varcyan，前端攻城炮炮兵，大學(xué)接觸前端至今一直從事于前端開發(fā)的工作，前端對(duì)于我來(lái)說(shuō)既是工作也是興趣所在。

龍遨星海，80后程序員，熱愛編程，喜歡解決技術(shù)問題，體驗(yàn)成功的喜悅。

摘要 如何在不同大小的設(shè)備上呈現(xiàn)同樣的顯示效果，實(shí)現(xiàn)在不同屏幕下自適應(yīng)設(shè)計(jì)方案，達(dá)到統(tǒng)一PC端和移動(dòng)端的頁(yè)面目標(biāo)。本篇文章簡(jiǎn)要介紹一種實(shí)現(xiàn)方案。

一、背景描述

隨著網(wǎng)絡(luò)的普及，越來(lái)越多的人使用手機(jī)上網(wǎng)。移動(dòng)設(shè)備正超過(guò)桌面設(shè)備，成為訪問互聯(lián)網(wǎng)的最常見終端。于是，網(wǎng)頁(yè)設(shè)計(jì)師和開發(fā)者不得不面對(duì)一個(gè)難題：如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁(yè)？

很多網(wǎng)站的解決方法，是為不同的設(shè)備提供不同的網(wǎng)頁(yè)，比如專門提供一個(gè)mobile版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比較麻煩，同時(shí)要維護(hù)好幾個(gè)版本，而且如果一個(gè)網(wǎng)站有多個(gè)portal（入口），會(huì)大大增加架構(gòu)設(shè)計(jì)的復(fù)雜度。

于是，很早就有人設(shè)想，能不能一次設(shè)計(jì)，普遍適用，讓同一張網(wǎng)頁(yè)自動(dòng)適應(yīng)不同大小的屏幕，根據(jù)屏幕寬度，自動(dòng)調(diào)整布局（layout）？二、什么是自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)（英語(yǔ)：Responsive web design，通?？s寫為RWD）別名（響應(yīng)式web設(shè)計(jì)）。

2010年，Ethan Marcotte提出了自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)這個(gè)名詞，指可以自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)。

他制作了一個(gè)范例，里面是《福爾摩斯歷險(xiǎn)記》六個(gè)主人公的頭像。如果屏幕寬度大于1300像素，則6張圖片并排在一行。

如果屏幕寬度在600像素到1300像素之間，則6張圖片分成兩行。

如果屏幕寬度在400像素到600像素之間，則導(dǎo)航欄移到網(wǎng)頁(yè)頭部。

如果屏幕寬度在400像素以下，則6張圖片分成三行。

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)單來(lái)說(shuō)是一個(gè)網(wǎng)站的布局能夠兼容多個(gè)不同終端， 而并不是傳統(tǒng)的pc端一套頁(yè)面，移動(dòng)端一套頁(yè)面。三、自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)采用技術(shù)1、控制視口（viewport）控制視口這一點(diǎn)不論是響應(yīng)式、自適應(yīng)還是移動(dòng)端布局都是最重要的。我們常常會(huì)使用這一句：

<meta name=viewport content=width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no>

viewport是網(wǎng)頁(yè)默認(rèn)的寬度和高度，上面這行代碼的意思是，網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁(yè)初始大小占屏幕面積的100%。視口寬度等于設(shè)備寬度，初始縮放比縮放比與最小縮放比均為1，禁止用戶縮放。詳細(xì)描述可查看 MDN-meta。在這里的設(shè)備像素比（dpr 即 deivcePixelRatio）也就是物理像素與設(shè)備獨(dú)立像素的比值，常見的有retina屏等。所有主流瀏覽器都支持這個(gè)設(shè)置，包括IE9。對(duì)于那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

<!--[if lt IE 9]>

<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>

<![endif]-->

2、CSS的媒體查詢（media query）

使用@media 查詢，你可以針對(duì)不同的媒體類型定義不同的樣式。請(qǐng)看下例：

@media only screen and (max-width: 480px){

header .top .tel,

header .top ul li:nth-child(3),

header .top ul li:nth-child(4){

display: none;

}

}

這個(gè)代碼片意思是當(dāng)設(shè)備視口寬度達(dá)到480px時(shí)對(duì) li 于.tel 進(jìn)行處理。media query的詳情可以查看 MDN-media 。對(duì)于IE9以下瀏覽器我們需要引入一個(gè)關(guān)于media query 的 polyfill（可以理解為補(bǔ)丁包）， css3-mediaqueries.js 或者 respond.js。

這種方式需要設(shè)計(jì)師針對(duì)不同尺寸的設(shè)備進(jìn)行設(shè)計(jì)，開發(fā)者進(jìn)行針對(duì)不同尺寸的相應(yīng)樣式編寫。但是這樣帶來(lái)的問題也越發(fā)讓開發(fā)者心煩意亂，最重要的一點(diǎn)就是兼容各種設(shè)備會(huì)導(dǎo)致 大量累贅的代碼，維護(hù)與重構(gòu)較麻煩。

3、圖片的自適應(yīng)（fluid image）

除了布局和文本，自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)還必須實(shí)現(xiàn)圖片的自動(dòng)縮放。

這只要一行CSS代碼：

img { max-width: 100%;}

這行代碼對(duì)于大多數(shù)嵌入網(wǎng)頁(yè)的視頻也有效，所以可以寫成：

img, object { max-width: 100%;}

老版本的IE不支持max-width，所以只好寫成：

img { width: 100%; }

此外，windows平臺(tái)縮放圖片時(shí)，可能出現(xiàn)圖像失真現(xiàn)象。這時(shí)，可以嘗試使用IE的專有命令：

img { -ms-interpolation-mode: bicubic; }

或者，Ethan Marcotte的imgSizer.js

addLoadEvent(function() {

var imgs = document.getElementById(content).getElementsByTagName(img);

imgSizer.collate(imgs);

});

不過(guò)，有條件的話，最好還是根據(jù)不同大小的屏幕，加載不同分辨率的圖片。有很多方法可以做到這一條，服務(wù)器端和客戶端都可以實(shí)現(xiàn)。

4、自適應(yīng)圖片等素材

這里我們常對(duì)圖片做處理，處理的方法有很多我們可以采用HTML5 picture 標(biāo)簽，利用該標(biāo)簽可以在不同設(shè)備中顯示不同的圖片。如下代碼：

<picture>

<source media=(max-width: 36rem)

srcset=img/ad001-l-480w.png/>

<source

srcset=img/ad001-l-1600w.png/>


</picture>

source 代表你要顯示圖片的源，media代表你需要什么條件下顯示該圖片，srcset 須填寫圖片路徑d s代碼片意思是當(dāng)設(shè)備視口寬度大于36rem 時(shí)顯示 ad001-l-480w.png 這張圖片，若小于 36rem 則使用ad001-l-1600w.png 這張圖片，要是瀏覽器不支持 picture 則使用 img 標(biāo)簽中的圖片。picture 詳細(xì)信息可查看 MDN-picture 同樣的這里需要注意在 IE9&IE9以下 瀏覽器想使用 picture 須導(dǎo)入 polyfill ，如 html5shiv.js 。

5、不使用絕對(duì)寬度

由于網(wǎng)頁(yè)會(huì)根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對(duì)寬度的布局，也不能使用具有絕對(duì)寬度的元素。這一條非常重要。

具體說(shuō)，CSS代碼不能指定像素寬度：

width: xxx px;

可以指定百分比寬度或自適應(yīng)：

width: xxx %;

width: auto;

6、相對(duì)大小的字體

字體也不能使用絕對(duì)大?。╬x），可以使用rem單位。

rem屬性指的是相對(duì)于根元素設(shè)置某個(gè)元素的字體大小。它同時(shí)也可以用作為設(shè)置高度等一系列可以用px來(lái)標(biāo)注的單位。

rem是CSS3新增的相對(duì)長(zhǎng)度單位，是指相對(duì)于根元素html的font-size計(jì)算值的大小。簡(jiǎn)單可理解為屏幕寬度的百分比。

與em相同的是它們都是使用元素設(shè)定字體大小，不同的是em是根據(jù)父級(jí)元素設(shè)置大小。而rem在根據(jù)指定html根元素的字符大小而定的，從IE6到Chrome中，默認(rèn)根元素的font-size都是16px的。如果想要設(shè)置12px的字體大小也就是12px/16px = 0.75rem。

由于px是相對(duì)固定單位，字號(hào)大寫直接被定死，無(wú)法隨著瀏覽器進(jìn)行縮放。

em和rem都是相對(duì)單位，em是相對(duì)于其父元素的font-size，頁(yè)面層級(jí)越深，em換算越復(fù)雜，麻煩。

rem直接相對(duì)于根元素html，避開層級(jí)關(guān)系，移動(dòng)端新型瀏覽器對(duì)其支持較好。

7、流動(dòng)布局（fluid grid）

流動(dòng)布局的含義是，各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的。

.main {

float: right;

width: 70%;

}

.leftBar {

float: left;

width: 25%;

}

float的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向overflow（溢出），避免了水平滾動(dòng)條的出現(xiàn)。

另外，絕對(duì)定位（position: absolute）的使用，也要非常小心。

8、選擇加載CSS

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的核心，就是CSS3引入的Media Query模塊。它的意思就是，自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的CSS文件。

<link rel=stylesheet type=text/css media=screen and (max-device-width: 400px) href=tinyScreen.css />

上面的代碼意思是，如果屏幕寬度小于400像素（max-device-width: 400px），就加載tinyScreen.css文件。

除了用html標(biāo)簽加載CSS文件，還可以在現(xiàn)有CSS文件中加載。

@import url(tinyScreen.css) screen and (max-device-width: 400px);

四、總結(jié)

自適應(yīng)布局的優(yōu)勢(shì)比較明顯：面對(duì)不同分辨率設(shè)備靈活性強(qiáng)，能夠快捷解決多設(shè)備顯示適應(yīng)問題，不需要再對(duì)同一個(gè)系統(tǒng)開發(fā)多套代碼。這個(gè)概念的時(shí)候是可以統(tǒng)一pc&mobile頁(yè)面。

但是這樣帶來(lái)的問題也越發(fā)讓開發(fā)者心煩意亂，最重要的一點(diǎn)就是兼容各種設(shè)備會(huì)導(dǎo)致大量累贅的代碼，維護(hù)與重構(gòu)較麻煩。還體現(xiàn)在由于要兼容各個(gè)設(shè)備工作量較大、代碼量增多并包含一些無(wú)用代碼，移動(dòng)帶寬增多；對(duì)低版本瀏覽器對(duì)兼容性較差；此外，自適應(yīng)布局一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會(huì)出現(xiàn)用戶混淆的情況。其實(shí)這是一種折衷性質(zhì)的設(shè)計(jì)解決方案，多方面因素影響而達(dá)不到效果。

新聞標(biāo)題：自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)\"
本文來(lái)源：http://chinadenli.net/article24/cjjjje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、品牌網(wǎng)站制作、Google、手機(jī)網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)