如何做好自適應網頁的設計

來源：文萃谷 1.03W

隨着3G的普及，越來越多的人使用手機上網。移動設備正超過桌面設備，成為訪問互聯網的最常見終端。於是，網頁設計師不得不面對一個難題：如何才能在不同大小的設備上呈現同樣的網頁？以下僅供參考！

一、允許網頁寬度自動調整

首先，在網頁代碼的頭部，加入一行viewport標籤。

viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔屏幕面積的100%。

所有主流瀏覽器都支持這個設置，包括IE9。對於那些老式瀏覽器（主要是IE6、7、8），需要使用。

二、不使用絕對寬度，不使用絕對大小的字體

由於網頁會根據屏幕寬度調整佈局，所以不能使用絕對寬度的佈局，也不能使用具有絕對寬度的元素。指定百分比寬度width: xx%或者width:XXem;

使用相對大小的字體em或者rem。一般瀏覽器的'默認字體大小為16px。“em”是一個相對的大小，其參考物指的是相對於元素父元素的font-size。因此，1em總是等於父元素的字體大小。而rem總是相對於根元素的字體大小進行計算的。

1.設置百分比時的計算

相對於父元素寬度的：[max/min-]width、left、right、padding、margin 等；

相對於父元素高度的：[max/min-]height、top、bottom 等；

相對於繼承字號的：font-size 等；

相對於自身字號的：line-height 等；

相對於自身寬高的：border-radius、background-size、transform: translate()、transform-origin、zoom、clip-path 等；

特殊算法的：background-position（方向長度 / 該方向除背景圖之外部分總長度 * 100）、filter 系列函數等；

如果自身設置 position: absolute，則相對於離它最近的那個 position 不為 static 的外層元素，如果沒有這樣的元素，則相對於窗口。

如果 position: fixed，“父元素”指視口。

margin如果沒有加後綴是相對於寬，但是加了後綴，比如margin-left，則是相對於高；

2.設置em時的計算

元素自身沒有設置字號大小時，則默認使用父元素字號大小。元素自身要是設置了字體大小後，則字體計算公式為：

需要轉換的像素值/父元素的font-size=em值

元素的width、height、line-height、margin、padding、border等值轉換總是以當前元素的字號大小計算：

需要轉換的像素值/元素的font-size=em值

比如：

rdiv {

font-size: 32px;

}

erdiv {

width: 2em; /*64/32=2*/

height: 2em;

line-height: 2em;

padding: 0.5em;

}

當innterdiv設置font-size的大小時

erdiv {

font-size: 0.5em;/*16/32=0.5*/

width: 2em;/*32/16=2*/

height: 2em;

line-height: 2em;

padding: 0.5em;

}

三、使用流動佈局

即各個區塊的位置都是浮動的，不是固定不變的。當寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。

四、選擇加載CSS

"自適應網頁設計"的核心，就是CSS3引入的Media Query模塊。設置斷點時，最好以內容為基礎設置，而不是以各種屏幕尺寸來設置。

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 780px) {}

五、圖片的自適應

使圖片的寬度為100%,但是不超過最大寬度400px;

img {

width: 100%;

max-width:400px;

}

大多數嵌入網頁的視頻也可這樣寫：img, object { max-width: 100%;}

六、font-size實現自適應

使用calc實現字體的自適應。比如要讓屏幕寬度在 1553px-1032px 的範圍內變化時，font-size大小是在12px-16px之間對應變化，則

font-size: calc(0.75em + 4*(100vw - 1032px) / 521);

vw 相對於視窗的寬度：視窗寬度是100vw。視窗寬度指瀏覽器內部的可視區域大小，即rWidth/rHeight大小，不包含任務欄標題欄以及底部工具欄的瀏覽器區域大小。

0.75em可以換成百分比font-size: calc(75% + 4*(100vw - 1032px) / 521);

也可換成px單位font-size: calc(12px + 4*(100vw - 1032px) / 521);但是Safari瀏覽器不支持該寫法。

網頁