作者varcyan龍遨星海

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

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

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

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

一、背景描述

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

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

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

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

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

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

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

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

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

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

<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)頁默認(rèn)的寬度和高度，上面這行代碼的意思是，網(wǎng)頁寬度默認(rèn)等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁初始大小占屏幕面積的100%。視口寬度等于設(shè)備寬度，初始縮放比縮放比與最小縮放比均為1，禁止用戶縮放。詳細(xì)描述可查看 MDN-meta。在這里的設(shè)備像素比（dpr 即 deivcePixelRatio）也就是物理像素與設(shè)備獨(dú)立像素的比值，常見的有retina屏等。所有主流瀏覽器都支持這個設(shè)置，包括IE9。對于那些老式瀏覽器（主要是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 查詢，你可以針對不同的媒體類型定義不同的樣式。請看下例：

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

}

}

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

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

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

除了布局和文本，自適應(yīng)網(wǎng)頁設(shè)計(jì)還必須實(shí)現(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ù)不同大小的屏幕，加載不同分辨率的圖片。有很多方法可以做到這一條，服務(wù)器端和客戶端都可以實(shí)現(xiàn)。

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

這里我們常對圖片做處理，處理的方法有很多我們可以采用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 時顯示 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、不使用絕對寬度

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

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

width: xxx px;

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

width: xxx %;

width: auto;

6、相對大小的字體

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

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

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

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

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

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

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

7、流動布局（fluid grid）

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

.main {

float: right;

width: 70%;

}

.leftBar {

float: left;

width: 25%;

}

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

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

8、選擇加載CSS

自適應(yīng)網(wǎng)頁設(shè)計(jì)的核心，就是CSS3引入的Media Query模塊。它的意思就是，自動探測屏幕寬度，然后加載相應(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è)備靈活性強(qiáng)，能夠快捷解決多設(shè)備顯示適應(yīng)問題，不需要再對同一個系統(tǒng)開發(fā)多套代碼。這個概念的時候是可以統(tǒng)一pc&mobile頁面。

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

新聞標(biāo)題：自適應(yīng)網(wǎng)頁設(shè)計(jì)\"
本文來源：http://sd-ha.com/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)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)