vue项目配备rem布局清单

vue项目适配rem布局

rem的原理将物理像素px分为一百份，每一份就是1rem，例如当你的手机是苹果6s，物理像素是375px，那么转化成rem就是37.5px。插件设置html根标签的字体属性font-size变为1rem，通过转换将css中的px转换成对应的rem。当屏幕发生大小缩放的时候，更改html下的font-size的大小，就能实现了其他标签的大小距离也随比例缩放，达到rem自适应布局。

1）安装依赖

npm i lib-flexible postcss-px2rem --save

2）删除index.html中的<meta name=‘viewport’ >视口标签

flexible会为页面根据屏幕自动添加<meta name='viewport' >标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值，不删除会造成重复追加，导致代码冗余等情况。

3） 入口文件main.js文件中引入依赖

import 'lib-flexible'

4）配置vue.config.js文件

module.exports = {
    
    
  devServer: {
    
    
    port: 3000,
    open: true
  },
  // rem 的配置
  css: {
    
    
    loaderOptions: {
    
    
      css: {
    
    },
      postcss: {
    
    
        plugins: [
          require('postcss-px2rem')({
    
    
            // 适配375px屏幕 设计图750中量出来的尺寸要 / 2
            remUnit: 37.5
          })
        ]
      }
    }
  }
}