基于CSS3的自適應(yīng)網(wǎng)頁的設(shè)計與實現(xiàn)

李伙欽

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

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

0 引言

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

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

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

1 CSS3概述

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

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

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

2.1 加入viewport元標簽

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

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

2.2 使用浮動布局

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

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

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

需要注意的是，浮動布局使用完成后，需要在后面補充一個清除浮動的標簽，避免后續(xù)的頁面元素錯位，如浮動元素后面跟一個

2.3 選擇性加載CSS

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

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

2.4 使用@media規(guī)則

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

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

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

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

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

2.5 盡量使用百分比

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

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

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

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

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

3 總結(jié)

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

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