魯迅曾經(jīng)說過：竊代碼不能算偷……竊代碼！……程序員的事，能算偷么！

最近有個(gè)項(xiàng)目需要做移動(dòng)端，想起來以前uncle對(duì)我說過，移動(dòng)端需要對(duì)不同的手機(jī)做適配，所以不能單純用px，很久以前的移動(dòng)端適配是使用的媒體查詢。

@media screen and (max-width: 300px){} 最大寬度300像素需要的樣式。

后來移動(dòng)端興起，為每一個(gè)都做一個(gè)適配不合理，所以需要做響應(yīng)式rem布局。

rem單位都是相對(duì)于根元素html的font-size來決定大小。

因此，如果通過rem來實(shí)現(xiàn)響應(yīng)式的布局，只需要根據(jù)視圖容器的大小，動(dòng)態(tài)的改變font-size即可（而em是相對(duì)于父元素的）。

這里可以使用js來讀取頁面大小。

貼一下uncle的代碼。

function fontRem() {
    var bodyWidth = document.getElementsByTagName("body")[0].clientWidth;
    var htmlWidth = document.getElementsByTagName('html')[0];
    var fontSize = bodyWidth / 375;
    htmlWidth.style.fontSize = fontSize + "px";
}
fontRem()
  // 改變窗口大小時(shí)重新設(shè)置 rem
window.onresize = function(){
fontRem();
}

介紹一下代碼，375就是設(shè)計(jì)圖的寬度，實(shí)際頁面尺寸 1px = 1rem。

看一下例子，這里設(shè)計(jì)圖寬度是375，這里我們?cè)O(shè)置寬度為250rem 和 375rem.可以看到，當(dāng)寬度為375rem時(shí)，并沒有出現(xiàn)x軸的滾動(dòng)條，所以剛剛好鋪滿。

因?yàn)樾枰玫絙ody和html這兩個(gè)標(biāo)簽，所以需要放到body外面的位置。