一個移動端 & PC 終端適配方案

此次咱們採用最多見的 rem 適配方案

別廢話，先看最終的適配效果：

Mobile 長這樣：

PC 長這樣：

嗯，還行，能看。

開搞，先安裝

固然仍是先安裝 amfe-flexible，建議用 npm

npm i amfe-flexible -S

而後在項目入口引入

import 'amfe-flexible'

若是不想使用 npm，那就用這個 script 引入

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js" />

單位轉換

爲了與設計稿 px 單位一致，還須要一個 px 轉 rem 的工具來幫忙

npm i postcss-pxtorem -D

配置好 webpack 的 postcss 插件

"postcss": {
  "plugins": {
    "postcss-pxtorem": {
      "rootValue": 37.5, // 這裏根據設計稿寬度自定義，常見 37.5 或 75
      "propList": [
        "*"
      ]
    }
  }
}

這樣就能夠直接用 px 單位，省去換算 rem

小適配

移動端雖然正常，但瀏覽器看發現比例偏大，因此咱們還得讓 PC 給我縮回去

思路比較簡單，用媒體查詢，大屏幕就重置根字體，給個最大縮放寬度

@media screen and (min-width: 750px) {
  html {
    font-size: 100px !important; // 這裏加權重是由於 amfe-flexible 經過行內樣式設置了根字體
  }

  body {
    max-width: 500PX; // 順帶提下，這裏也能夠小寫 px，大寫 PX 能夠讓 postcss-pxtorem 忽略轉成 rem
    margin: 0 auto;
  }
}

就這樣吧