移動端適配

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

最近有個項目需要做移動端，想起來以前uncle對我說過，移動端需要對不同的手機做適配，所以不能單純用px，很久以前的移動端適配是使用的媒體查詢。

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

后來移動端興起，為每一個都做一個適配不合理，所以需要做響應式rem布局。

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

因此，如果通過rem來實現響應式的布局，只需要根據視圖容器的大小，動態的改變font-size即可（而em是相對于父元素的）。

這里可以使用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()
  // 改變窗口大小時重新設置 rem
window.onresize = function(){
fontRem();
}

介紹一下代碼，375就是設計圖的寬度，實際頁面尺寸 1px = 1rem。

看一下例子，這里設計圖寬度是375，這里我們設置寬度為250rem 和 375rem.可以看到，當寬度為375rem時，并沒有出現x軸的滾動條，所以剛剛好鋪滿。

因為需要拿到body和html這兩個標簽，所以需要放到body外面的位置。