作者varcyan龍遨星海

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

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

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

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

一、背景描述

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

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

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

自適應網(wǎng)頁設計（英語：Responsive web design，通常縮寫為RWD）別名（響應式web設計）。

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

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

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

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

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

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

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

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

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

@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;

}

}

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

這種方式需要設計師針對不同尺寸的設備進行設計，開發(fā)者進行針對不同尺寸的相應樣式編寫。但是這樣帶來的問題也越發(fā)讓開發(fā)者心煩意亂，最重要的一點就是兼容各種設備會導致 大量累贅的代碼，維護與重構較麻煩。

3、圖片的自適應（fluid image）

除了布局和文本，自適應網(wǎng)頁設計還必須實現(xiàn)圖片的自動縮放。

這只要一行CSS代碼：

img { max-width: 100%;}

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

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

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

img { width: 100%; }

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

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

或者，Ethan Marcotte的imgSizer.js

addLoadEvent(function() {

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

imgSizer.collate(imgs);

});

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

4、自適應圖片等素材

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

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

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


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

5、不使用絕對寬度

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

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

width: xxx px;

可以指定百分比寬度或自適應：

width: xxx %;

width: auto;

6、相對大小的字體

字體也不能使用絕對大小（px），可以使用rem單位。

rem屬性指的是相對于根元素設置某個元素的字體大小。它同時也可以用作為設置高度等一系列可以用px來標注的單位。

rem是CSS3新增的相對長度單位，是指相對于根元素html的font-size計算值的大小。簡單可理解為屏幕寬度的百分比。

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

由于px是相對固定單位，字號大寫直接被定死，無法隨著瀏覽器進行縮放。

em和rem都是相對單位，em是相對于其父元素的font-size，頁面層級越深，em換算越復雜，麻煩。

rem直接相對于根元素html，避開層級關系，移動端新型瀏覽器對其支持較好。

7、流動布局（fluid grid）

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

.main {

float: right;

width: 70%;

}

.leftBar {

float: left;

width: 25%;

}

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

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

8、選擇加載CSS

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

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

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

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

四、總結

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

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

當前題目：自適應網(wǎng)頁設計\"
文章路徑：http://weahome.cn/article/cjjjje.html