rem与vw适配方案

目前移动端适配方案有两种:

1.flex+rem单位 当前用的比较多 相对主流(比如小米和淘宝移动端)

2.flex+viewport width/viewport height单位 这是一个比较新兴的适配方案 属于未来使用的一个趋势(如b站移动端)

下面介绍一下这两种方法的使用方法

rem适配

rem是一个相对单位,1rem就是html标签文字的大小

1，安装 amfe-flexible插件 npm i amfe-flexible

2，在main.js导入 import "amfe-flexible"

3，安装postcss-pxtorem npm i postcss-pxtorem@5.0.0 -D

配制:来到 项目根目录，也就是跟 package.json 平级的位置，新建一个 postcss.config.js，复制如下配置

module.exports={
    plugins:{
    'postcss-pxtorem': {
        rootValue:37.5,
        propList:["*"]  
        }
    }
}

module.exports = config => {
  console.log('file', config.file)
  // config.file字符串
  // config.file字符串（包含所有要转换的css文件）:需要打包的文件   vant希望基数37.5(node_modules/vant)      ps:90
  // 'node_modules/vant/...'      'node_modules/vant'
  const base = config.file.includes(path.join('node_modules', 'vant'))
    ? 37.5
    : 90

  return {
    plugins: {
      'postcss-pxtorem': {
        rootValue: 37.5, // 90/37.5 // 转换基数，设计稿的/10
        propList: ['*'] // 哪些css需要转换
      }
    }
  }
}

vw适配

vw：100vw=== 屏幕的百分百

相对屏幕的百分比单位

百分比是相对父级

实现过程：

安装插件 npm i postcss-px-to-viewport -D

配制 根目录下的postcss.config.js

module.exports=({file})=>{
// const base= file.includes(path.join('node_modules','vant'))?375:750
 return {
     plugins:{
         'postcss-px-to-viewport':{
             viewportWidth:375
         }
     }
 } 
}

大致步骤：

安装 postcss-px-to-viewport 插件

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

添加插件配置 参考 浏览器适配(opens new window)

代码：

安装

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

配置 postcss.config.js

  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    }
  }
}

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

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

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