基于CSS3的自適應網頁的設計與實現

李伙欽

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

【關鍵詞】CSS3；網頁自適應；響應式

0 引言

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

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

全新的CSS3標準為網頁自適應提供了較好的解決方案，通過CSS3新增的一些功能能夠自動根據屏幕分辨率調整頁面內容布局，在各種不同設備上都呈現出令人滿意效果。

1 CSS3概述

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

2 自適應網頁設計

在2010年，Ethan Marcotte提出了“響應式網頁設計（Responsive Web Design）”的概念，“響應式網頁設計”即本文所說的“自適應網頁設計”，指的是網頁能夠根據屏幕寬度自動做出調整的設計方案。要實現自適應網頁可以通過CSS3樣式實現，以下是實現思路。

2.1 加入viewport元標簽

在網頁頭部加入

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

2.2 使用浮動布局

設置網頁中需要自動調整位置的網頁元素的CSS樣式為float：left或者float：right。

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

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

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

2.3 選擇性加載CSS

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

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

2.4 使用@media規則

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

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

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

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

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

2.5 盡量使用百分比

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

布局對象div、table等都可以設置百分比，特別注意的是字體和背景圖片也可以設置成百分比，如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%；}意思是頁面背景圖片充滿整個頁面，并且隨著頁面大小自動放大縮小。

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

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

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

3 總結

由于現在移動互聯設備的多樣性，需要自適應網頁來滿足不同屏幕分辨率。CSS3為我們帶來了很多實用的新功能新屬性，正確合理使用CSS3可以很好的實現自適應網頁設計。

[責任編輯：王楠]