移动端适配方案

序言

移动端有许多适配方案，今天博主为大家总结两种常用适配方案。

lib-flexible和postcss-pxtorem适配方案

lib-flexible会自动在html的head中添加一个 meta name="viewport" 的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem。但是当分辨率大于某个特定值时，它便不再生效。

lib-flexible并不独立出现，而是搭配postcss一起做适配方案，目的是自动将css中的px转换成rem。以下为它在react中的使用。

安装lib-flexible

npm i lib-flexible -S

使用方式:

import React from 'react'
import ReactDOM from 'react-dom'
import App from '@/App'
import 'lib-flexible/flexible'
import { BrowserRouter as Router } from "react-router-dom"

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
)

如果是vue的话就在main.js中引用。

安装postcss-pxtorem

npm i postcss-pxtorem

然后我们在项目根目录（一般与src目录同级）下面添加 postcss.config.js:

// 具体配置可以去 postcss-pxtorem 仓库看看文档
module.exports = {
  "plugins": [
    require("postcss-pxtorem")({
      rootValue: 37.5,
      propList: ['*'],
      selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
    })
  ]
}

之后我们写css样式的时候只需要正常写css即可，postcss会自动将我们的px转化为rem。

不过lib-flexible的作者建议我们使用viewport来代替此方案。

viewport适配方案

这里我介绍一下viewport的使用方法，viewport配置起来很容易，只需要新增一个postcss.config.js文件，这样在代码中写入的px会自动转换成vw单位，同样可以达到移动端适配的效果。

安装

npm install postcss-px-to-viewport -save-dev //npm

yarn add -D postcss-px-to-viewport //yarn

然后在index.html里面配置

 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

然后在根目录下面添加postcss.config.js文件

// postcss.config.js文件内容
module.exports = {
  // 以iPhone6、7、8为基础
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', //需要转换的单位，默认为"px"
      viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度
      viewportHeight: 1334, //视窗的高度，根据375设备的宽度来指定，一般指定667，也可以不配置
      unitPrecision: 13, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      propList: ['*'], // 能转化为vw的属性列表
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      fontViewportUnit: 'vw', //字体使用的视口单位
      selectorBlackList: ['.ignore-', '.hairlines', 'wrap'], //指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false, // 允许在媒体查询中转换`px`
      replace: true, //是否直接更换属性值，而不添加备用属性
      exclude: [/RightBar/, /gotop.vue/, /node_modules/], //忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
      landscape: false, //是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
      landscapeUnit: 'vw', //横屏时使用的单位
      landscapeWidth: 1334 //横屏时使用的视口宽度
    }
  }
};

可以看到我们的px元素被转化成了vw元素。