十分簡單的web移動端rem適配

rem作移動端適配已經獲得廣大web開發都的喜好。其實，簡單的作rem很是容易。只須要三處引入便可。

html處引入

meta處作適配聲明：

<!-- 名字：視口；內容：寬=設備寬，初始縮放比例=1.0，用戶縮放=不，最大縮放比例=1.0--!>
<meta 
    name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"
/>
<!-- x5(也就是在微信上）滿屏，其餘瀏覽器也滿屏 --!> 
<meta name="x5-fullscreen" content="true" />
<meta name="full-screen" content="yes" />

script引入

在這裏我做爲除以10的處理，固然也可改成你以爲方便計算的值。

<script>
  document.getElementsByTagName('html')[0].style.fontSize = 
      (document.documentElement.clientWidth || document.body.clientWidth) / 10 + 'px';
</script>
<!-- 其中，document.documentElement.clientWidth返回的是html元素 -->

編輯器引入一個px轉換rem的插件

我用的是vscode，在插件入搜素px2rem，安裝第一個就能夠了。

由於插件默認的html字體大小（root font size）設爲16px,因爲我用的設計稿都是iphone6的尺寸，因此在這裏改成37.5

• 注意：這裏是以你引入的script所做的係數來轉換的。

別忘了重啓一下編輯器。
而後就能夠在css文件上編輯了，推薦把備註也帶上，在瀏覽器上能夠看到的。