rem佈局秒解

視口（viewport）的理解

1. layout viewport（佈局視口）
   Layout viewportd 寬度大於瀏覽器的可視區域，就好比你的電腦屏幕寬度是1024，但是你網頁的寬度是1400.那麼1400就是layout viewport的寬度。

2. Visual viewport（視覺視口）
   Visual Viewport 的寬度就相當於你客戶端的屏幕大小。
   寬度獲取可以通過 window.innerWidth獲取。

3. .Ideal viewport（理想視口）
   移動設備的理想viewport

設置視口

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

設置根html元素

一般我們將其設備的寬度分爲30分，這裏以iphonex爲例，iphonex的設備寬度爲375px，分成30份，定義 1rem = 375px / 30 = 12.5px;

爲了動態適配所有設備，通過動態根據設備寬度進度進行設置根html的fontSize值，代碼如下：

/*pxRem 爲獲取1rem的像素數值*/
let pxRem = window.screen.width / 30;
/*pxRem + ‘px’ 設置1rem的值*/
document.getElementsByTagName("html")[0].style.fontSize = pxRem + "px";

結論： width: 100% === 30rem; 大家再根據設計圖的比例進行換算即可；