适配教程（viewport和rem）

个人建议移动端最好使用vw，他们的优点和缺点自己可以在下面查一下

目标：在项目中加入vw的适配方案

VantUI中的所有组件都是以375的设计搞进行适配

大致步骤：

• 安装 postcss-px-to-viewport 插件

• 新建一个 postcss.config.js 的配置文件

• 添加插件配置 参考 浏览器适配

1.安装

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

2.配置 postcss.config.js  

const path = require('path')

module.exports = ({ webpack }) => {
  const designWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750
// 根据路径 输出不同的页面的设计尺寸. 我这里是判断路径是否包含xxx,如果包含就输出750px宽度的尺寸

  return {
    plugins: {
      autoprefixer: {},
      'postcss-px-to-viewport': {
        viewportWidth: designWidth, // 750, //设计稿尺寸
        exclude: /(\/|\\)(node_modules)(\/|\\)/ // 第三方UI组件单位不转vw
      }
    }
  }
}

 

• 注意，该插件对行内样式无效，建议样式通过类来定义。

• postcss 可以认为是后处理器，对css代码做后续的处理 （转单位，加私有前缀..）

​​​​​​这种配置也是有效的，建议使用这种

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
      exclude: /(\/|\\)(node_modules)(\/|\\)/ // 第三方UI组件单位不转vw
    }
  }
}

总结： 通过postcss-px-to-viewport插件解决移动端适配  

rem适配

• lib-flexible 用于设置 rem 基准值（动态）

作用：根据手机屏幕大小动态设置根HTML字体大小

安装：

# 修改rem基准值的js插件
npm i amfe-flexible -S

• 在webpack.config.js中配置postcss-loader

 注：在使用webpack脚手架之后不需要设置这个

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname,"/dist"),
        filename: "bundle.js"
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use:  ['style-loader','css-loader','postcss-loader']  //配置postcss-loader
            }
        ]
    },  
}

• 在项目根目录新建.postcssrc.js文件，在其中写入postcss-pxtorem插件配置

 

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
        rootValue: 75,                   //750的设计稿
        propList: ['*']
     }
   }
}

入口文件main.js导入 amfe-flexible

import 'amfe-flexible'

注意：这个可能会出现些问题 建议使用vw适配