李伙欽

【摘 要】隨著移動(dòng)互聯(lián)網(wǎng)的飛速發(fā)展，智能手機(jī)與平板電腦等智能移動(dòng)終端已經(jīng)相當(dāng)普及，移動(dòng)終端的屏幕分辨率各式各樣，如何讓網(wǎng)頁適應(yīng)不同的屏幕分辨率，為用戶提供良好的用戶體驗(yàn)，這對網(wǎng)頁設(shè)計(jì)是一個(gè)難題。全新的CSS3標(biāo)準(zhǔn)為網(wǎng)頁自適應(yīng)提供了較好的解決方案。本文分析和闡述了網(wǎng)頁適應(yīng)不同屏幕分辨率所存在的問題，以及詳細(xì)介紹使用CSS3解決網(wǎng)頁自適應(yīng)問題的設(shè)計(jì)思路與代碼實(shí)現(xiàn)。

【關(guān)鍵詞】CSS3；網(wǎng)頁自適應(yīng)；響應(yīng)式

0 引言

近幾年，移動(dòng)互聯(lián)網(wǎng)蓬勃發(fā)展，智能手機(jī)和平板電腦等移動(dòng)終端已相當(dāng)普及，相對于傳統(tǒng)的電腦，移動(dòng)終端的屏幕分辨率多種多樣，而且還能切換橫屏豎屏，傳統(tǒng)的只針對電腦設(shè)計(jì)的網(wǎng)頁在移動(dòng)終端上顯示就會(huì)出現(xiàn)問題。一般手機(jī)屏幕分辨率較小，電腦上顯示正常的網(wǎng)頁，在手機(jī)上可能就會(huì)被縮得很小或者布局顯示變形，用戶瀏覽起來就很困難。

早期對于這個(gè)問題的解決辦法主要有兩個(gè)，一個(gè)是為手機(jī)等移動(dòng)終端單獨(dú)設(shè)計(jì)網(wǎng)頁，如使用WAP（無線應(yīng)用協(xié)議）開發(fā)適用于手機(jī)的網(wǎng)頁，WAP協(xié)議比較簡單，適應(yīng)性強(qiáng)，但不能顯示太復(fù)雜的特效，使用這種辦法解決了手機(jī)等小屏幕終端的問題，但重新開發(fā)一整個(gè)網(wǎng)站費(fèi)時(shí)費(fèi)力，顯示效果也比較簡陋；另外一種解決辦法是使用瀏覽器轉(zhuǎn)碼，常見手機(jī)瀏覽器如UC瀏覽器、QQ瀏覽器、Opera瀏覽器等都有自動(dòng)轉(zhuǎn)碼功能，瀏覽器將網(wǎng)頁進(jìn)行轉(zhuǎn)碼，減小圖片大小，放大文字，以適合手機(jī)屏幕分辨率的樣式呈現(xiàn)，這種方式自動(dòng)化處理，效果還不錯(cuò)，但主要問題是缺乏靈活性，轉(zhuǎn)碼后的效果未必適合所有網(wǎng)頁。

全新的CSS3標(biāo)準(zhǔn)為網(wǎng)頁自適應(yīng)提供了較好的解決方案，通過CSS3新增的一些功能能夠自動(dòng)根據(jù)屏幕分辨率調(diào)整頁面內(nèi)容布局，在各種不同設(shè)備上都呈現(xiàn)出令人滿意效果。

1 CSS3概述

CSS3是CSS（層疊樣式表）的最新標(biāo)準(zhǔn)，它是由Adobe、蘋果、谷歌、微軟等IT屆的大公司聯(lián)合組織的“CSS Working Group”組織策劃制訂的，CSS3相對于CSS2引入很多實(shí)用的特性，如圓角、陰影、半透明背景、漸變、盒子模型、過渡與動(dòng)畫、多列布局。這些特性的引入讓曾經(jīng)需要JavaScript或者Flash才能實(shí)現(xiàn)的復(fù)雜功能，通過簡單的CSS樣式設(shè)置即可實(shí)現(xiàn)，大大方便了網(wǎng)頁設(shè)計(jì)。

2 自適應(yīng)網(wǎng)頁設(shè)計(jì)

在2010年，Ethan Marcotte提出了“響應(yīng)式網(wǎng)頁設(shè)計(jì)（Responsive Web Design）”的概念，“響應(yīng)式網(wǎng)頁設(shè)計(jì)”即本文所說的“自適應(yīng)網(wǎng)頁設(shè)計(jì)”，指的是網(wǎng)頁能夠根據(jù)屏幕寬度自動(dòng)做出調(diào)整的設(shè)計(jì)方案。要實(shí)現(xiàn)自適應(yīng)網(wǎng)頁可以通過CSS3樣式實(shí)現(xiàn)，以下是實(shí)現(xiàn)思路。

2.1 加入viewport元標(biāo)簽

在網(wǎng)頁頭部加入

這句話意思是添加名為“viewport”的meta元標(biāo)簽，width=device-width意思是寬度為設(shè)備寬度，initial-scale=1意思是原始縮放比例為1，即顯示比例100%，不縮放也不放大。目前主流的手機(jī)瀏覽器都支持CSS3，即支持viewport元標(biāo)簽，當(dāng)在手機(jī)瀏覽帶viewport元標(biāo)簽的網(wǎng)頁時(shí)候，手機(jī)屏幕分辨率的寬度就指定給了網(wǎng)頁寬度。這是CSS3自適應(yīng)網(wǎng)頁設(shè)計(jì)的一個(gè)必要條件。

2.2 使用浮動(dòng)布局

設(shè)置網(wǎng)頁中需要自動(dòng)調(diào)整位置的網(wǎng)頁元素的CSS樣式為float：left或者float：right。

CSS中float屬性用于產(chǎn)生浮動(dòng)布局，該屬性不是CSS3特有的，早在CSS1就有這個(gè)屬性了，該屬性在DIV+CSS布局模式中經(jīng)常用到。float主要有l(wèi)eft和right屬性值，設(shè)定后網(wǎng)頁元素變成浮動(dòng)元素，浮動(dòng)的元素可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)元素的邊框?yàn)橹?，浮?dòng)元素會(huì)在同一行一個(gè)挨著一個(gè)排列過去，排不下了會(huì)自動(dòng)新起一行繼續(xù)排列。

浮動(dòng)布局在自適應(yīng)網(wǎng)頁設(shè)計(jì)中十分適用，屏幕寬度大就一行多排幾個(gè)，屏幕寬度小就一行少排幾個(gè)，這樣就可以在不縮放網(wǎng)頁情況下適應(yīng)不同寬度屏幕，顯示同樣多的內(nèi)容。例如：12張圖片，每張圖片寬度300px，在PC上屏幕寬度1280px，使用浮動(dòng)布局即可顯示3行4列，而手機(jī)屏幕寬度720px，使用浮動(dòng)布局即可自動(dòng)顯示為6行2列。

需要注意的是，浮動(dòng)布局使用完成后，需要在后面補(bǔ)充一個(gè)清除浮動(dòng)的標(biāo)簽，避免后續(xù)的頁面元素錯(cuò)位，如浮動(dòng)元素后面跟一個(gè)

2.3 選擇性加載CSS

CSS3新增的Media Query模塊，用于自動(dòng)探測屏幕寬度，加載相應(yīng)的CSS文件，這是CSS3中自適應(yīng)頁面設(shè)計(jì)的核心所在。如，這段代碼的意思就是如果屏幕寬度小于600px就加載small.css，這樣就可以有針對性的設(shè)計(jì)不同分辨率下的CSS樣式。

除了在頁面中設(shè)置選擇性加載，還可以在CSS文件中設(shè)置選擇性加載，如在css文件中寫上 @import url（"small.css"） screen and （max-device-width： 600px）。

2.4 使用@media規(guī)則

@media用于在同一個(gè)CSS文件中，根據(jù)不同的設(shè)備分辨率，設(shè)置不同的CSS樣式。如：@media only screen and （max-width：600px） and （min-width：500px）{html{font-size：20px}}

意思是當(dāng)屏幕寬度大于500px，小于600px時(shí)候，網(wǎng)頁中的字體設(shè)置為大小20px。

@media only screen and （max-width：800px）{img{width：50%}；body{background-size：100%；}}

意思是當(dāng)屏幕小于800px時(shí)候，img圖片顯示50%寬度，網(wǎng)頁背景圖片自動(dòng)縮放到屏幕大小。

@media規(guī)則靈活的解決了不同屏幕分辨率下的顯示問題，可以根據(jù)需要設(shè)置不同的文字大小、圖片大小等任意CSS樣式，是自適應(yīng)頁面設(shè)計(jì)的常用方法之一。

2.5 盡量使用百分比

在傳統(tǒng)網(wǎng)頁布局中，布局對象如div、table等的寬度高度經(jīng)常是寫絕對寬度值、絕對高度值，而在自適應(yīng)頁面設(shè)計(jì)中盡量要使用百分比，如 body{width：100%}，table{width：80%}這樣設(shè)計(jì)的好處是頁面、圖片、表格等會(huì)隨著頁面分辨率的放大而放大，縮小而縮小。

布局對象div、table等都可以設(shè)置百分比，特別注意的是字體和背景圖片也可以設(shè)置成百分比，如p{font-size：1.4rem}，td{font-size：60%}，body{background-size：100%；}，p{font-size：1.4rem}意思是p標(biāo)簽采用默認(rèn)字體1.4倍大小顯示，rem是字體相對大小的單位，td{font-size：60%}意思是td標(biāo)簽采用默認(rèn)字體0.6倍大小顯示，body{background-size：100%；}意思是頁面背景圖片充滿整個(gè)頁面，并且隨著頁面大小自動(dòng)放大縮小。

不過對于采用百分比的網(wǎng)頁布局，會(huì)存在被放太大導(dǎo)致圖片失真或者縮太小導(dǎo)致表格文字堆在一起的情況，這時(shí)候需要配合前面3，4兩點(diǎn)所提到選擇性加載CSS與@media規(guī)則，對于太大或者太小的屏幕分辨率進(jìn)行針對性的處理。

2.6 合理使用max-width與min-width

max-width、min-width用來設(shè)置表格、div、圖片等布局對象的最大最小寬度，這是很有用的樣式，如前面第5點(diǎn)提到的，當(dāng)頁面放太大導(dǎo)致圖片失真的情況就可以通過max-width加以限制，再比如新聞內(nèi)容頁面中圖片有大有小，大圖可能會(huì)超出布局框，如果只是設(shè)置width，雖然大圖會(huì)縮到合適大小，但同時(shí)會(huì)出現(xiàn)小圖被放大失真的情況，解決這個(gè)問題的最好辦法就是設(shè)置一下img{max-width：100%}，這樣大圖會(huì)縮小到合適大小，小圖顯示原來大小不會(huì)被放大失真。

3 總結(jié)

由于現(xiàn)在移動(dòng)互聯(lián)設(shè)備的多樣性，需要自適應(yīng)網(wǎng)頁來滿足不同屏幕分辨率。CSS3為我們帶來了很多實(shí)用的新功能新屬性，正確合理使用CSS3可以很好的實(shí)現(xiàn)自適應(yīng)網(wǎng)頁設(shè)計(jì)。

[責(zé)任編輯：王楠]