News

第二種辦法是CSS3選擇CSS

允許網頁寬度自動調整

“自适應網頁設計”到底是怎麽做(zuò)到的(de)？其實并不難。

首先，在網頁代碼的(de)頭部，加入一行viewport元标簽。

1.

viewport是網頁默認的(de)寬度和(hé)高(gāo)度，上面這(zhè)行代碼的(de)意思是，網頁寬度默認等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）爲1.0，即網頁初始大(dà)小占屏幕面積的(de)100%。

所有主流浏覽器都支持這(zhè)個(gè)設置，包括IE9。對(duì)于那些老式浏覽器（主要是IE6、7、8），需要使用(yòng)css3-mediaqueries.js。

1.

2.

3.

三、不使用(yòng)絕對(duì)寬度

由于網頁會根據屏幕寬度調整布局，所以不能使用(yòng)絕對(duì)寬度的(de)布局，也(yě)不能使用(yòng)具有絕對(duì)寬度的(de)元素。這(zhè)一條非常重要。

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

1.width:300px;

隻能指定百分(fēn)比寬度：

1.width:  98%;

或者

1.width:auto;

四、相對(duì)大(dà)小的(de)字體

字體也(yě)不能使用(yòng)絕對(duì)大(dà)小（px），而隻能使用(yòng)相對(duì)大(dà)小（em）。

1. body {

2.    font: normal 100% Helvetica, Arial, sans-serif;

3. }

上面的(de)代碼指定，字體大(dà)小是頁面默認大(dà)小的(de)100%，即16像素。

1.h1 {

2.  font-size: 1.5em;

3.}

然後，h1的(de)大(dà)小是默認大(dà)小的(de)1.5倍，即24像素（24/16=1.5）。

1.  small {

2.    font-size: 0.875em;

3.  }

small元素的(de)大(dà)小是默認大(dà)小的(de)0.875倍，即14像素（14/16=0.875）。

五、流動布局（fluid grid）

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

1..main {

2.   float: rightright;

3.   width: 70%;

4.}

5..leftBar {

6.   float: left;

7.   width: 25%;

8.}

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

另外，絕對(duì)定位（position: absolute）的(de)使用(yòng)，也(yě)要非常小心。

六、選擇加載CSS

“自适應網頁設計”的(de)核心，就是CSS3引入的(de)Media Query模塊。

它的(de)意思就是，自動探測屏幕寬度，然後加載相應的(de)CSS文件。

1.

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

1.  

2.    media=”screen and (min-width: 400px) and (max-device-width: 600px)”

3.    href=”smallScreen.css” />

如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。

除了(le)用(yòng)html标簽加載CSS文件，還(hái)可(kě)以在現有CSS文件中加載。

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

七、CSS的(de)@media規則

同一個(gè)CSS文件中，也(yě)可(kě)以根據不同的(de)屏幕分(fēn)辨率，選擇應用(yòng)不同的(de)CSS規則。

1.@media screen and (max-device-width: 400px) {

2.  .column {

3.    float: none;

4.    width:auto;

5.  }

6.  #sidebar {

7.    display:none;

8.  }

9.}

上面的(de)代碼意思是，如果屏幕寬度小于400像素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。

八、圖片的(de)自适應（fluid image）

除了(le)布局和(hé)文本，”自适應網頁設計”還(hái)必須實現圖片的(de)自動縮放。

這(zhè)隻要一行CSS代碼：

1.img { max-width: 100%;}

這(zhè)行代碼對(duì)于大(dà)多(duō)數嵌入網頁的(de)視頻(pín)也(yě)有效，所以可(kě)以寫成：

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

老版本的(de)IE不支持max-width，所以隻好寫成：

1.img { width: 100%; }

此外，windows平台縮放圖片時(shí)，可(kě)能出現圖像失真現象。這(zhè)時(shí)，可(kě)以嘗試使用(yòng)IE的(de)專有命令：

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

或者，Ethan Marcotte的(de)imgSizer.js。

1.addLoadEvent(function() {

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

3.  imgSizer.collate(imgs);

4.});

不過，有條件的(de)話(huà)，最好還(hái)是根據不同大(dà)小的(de)屏幕，加載不同分(fēn)辨率的(de)圖片。有很多(duō)方法可(kě)以做(zuò)到這(zhè)一條，服務器端和(hé)客戶端都可(kě)以實現。