一个移动端 & 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;
  }
}

就这样吧