日媽常說的H5頁面，為啥叫H5頁面嘛，不就是手機上展示的頁面嗎？那是因為啊手機兼容所有html5新特性，所以跑在手機上的頁面也叫h5頁面，跨平臺（安裝ios),基于webview，它就是終端開發的一個組件，簡單理解就是一個瀏覽器，放入url就可以訪問地址，而webview基本上都是基于webket的內核，所以只需要兼容webket就行了，省了其他內核如IE，moz ,o等等

?

一般移動端響應式布局（flex+媒體查詢器基本上就夠用了

?

?

?

1rem=16px(移動端默認的)根據這個去換算單位，這個可以改變的嘛，改變html 根元素的font-size就行了啊，font-size是繼承的嘛，所以改變源頭，那1rem也就跟著改變了嘛

有兩種方法來改變html 的font-size 的值

一種就是寫媒體查詢器，這種太垃圾了，媽的安卓納悶多機型，你去給勞資寫

二種就是通過js動態設置html的font-size

代碼如下：

document.body指的是html節點中的body節點 document.documentElement值得是根節點，即html節點。 document.documentElement.clientWidth獲取根節點html的寬度不能亂寫寫成document.html.clientWidth這是錯誤的哈 document.body.clientWidth獲取body節點的寬度 為啥要這兩個呢 因為兼容問題啊有時候拿不到根節點的寬度就會拿body來頂替

?

這里為啥要除以10呢？ 因為1rem=html的font-size,除以10那是為了方便計算，當然不能太離譜除以200, 蘋果6 7 8 視窗的寬度是375px，以它為例子，除以10html的font-size就是37.5px即 1rem=37.5px;如果設計圖某一個高度是150px 則高度寫成4rem就行了啊，150/37.5=4rem 搞定 但是不可能每次都去除啊，所以這里rem要和scss結合在一起使用就很good了，用scss里面寫一個函數就搞定了 這里就要學習一下scss了 一般都是以iphone6為基準設計稿，里面的標注除以2 才是你代碼里面的實際值

轉載于:https://www.cnblogs.com/myfirstboke/p/11123554.html

總結

以上是生活随笔為你收集整理的移动端Rem之讲解总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。