移動網頁rem實現伸縮式佈局設計

在瞭解rem單位與字體大小的關係後，還是先用一個實例來實現伸縮式佈局的效果。新建index.html文件，新增代碼如下：

因為rem單位所實際代表的寬度會根據元素的字體大小改變，所以只需要通過JavaScript動態地獲取頁面寬度，再根據設計的切圖寬度（如代碼中為320px）進行計算，就可以得出字體的實際大小。這裡的核心代碼如下

var clientWidth = docEl.clientWidth;

if (!clientWidth)

return;

docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';

以幾個主流的設備寬度為例，若設計以320px標準為寬度，根元素字體默認為20px。則當設備寬度提升到640px的時候，計算字體大小的公式是:20*（640/320）

以上計算得出的值為40，也就是在640寬度設備下，默認字體大小會放大兩倍。而同樣img元素的寬度定義為14rem時，在320寬度下實際寬度為280px，而640寬度下就會自動變為560px。實現等比縮放的效果的同時，只需要編寫一套rem單位的佈局樣式表文件。

在遊覽器中運行index.hml文件，發現不同設備下網頁的佈局並沒有失調，從而實現了可伸縮式的佈局。展示效果如圖所示

除了使用JavaScript動態計算，還可以使用media query在樣式表預先設置字體列表，從而實現自動適配