隨著3G的普及,越來越多的人使用手機上網(wǎng)。移動設備正超過桌面設備,成為訪問互聯(lián)網(wǎng)的最常見終端。于是,網(wǎng)頁設計師不得不面對一個難題:如何才能在不同大小的設備上呈現(xiàn)同樣的網(wǎng)頁?本篇文章將講述自適應網(wǎng)頁設計的概念和方法,使網(wǎng)頁開發(fā)人員維護同一個網(wǎng)頁代碼,即可使網(wǎng)站在多種設備上具有更好的閱讀體驗。本文詳細介紹了自適應網(wǎng)頁的實現(xiàn)方法,希望能給迷惑的你帶來幫助。

  一. 在HTML的頭部加入meta標簽

    在HTML的頭部,也就是head標簽中增加meta標簽,告訴瀏覽器網(wǎng)頁寬度等于設備屏幕寬度,且不進行縮放,代碼如下:

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

 

     簡單分析一下這一行代碼的含義:width=device-width表示網(wǎng)頁的寬度等于設備屏幕的寬度,initial-scale=1.0表示設置頁面初始的縮放比例為1,user-scalable=no表示禁止用戶進行縮放,maximum-scale=1.0 和 minimum-scale=1.0 表示設置最大的和最小的頁面縮放比例。因為各大瀏覽器對meta標簽的解析程度不一樣,所以我們要盡可能的去兼容所有瀏覽器。

 

  二. 百分比布局

網(wǎng)友評論