vue移动端项目中rem,vm适配方案

前言

因为移动端设备屏幕尺寸非常多，碎片化严重。为了兼容市面上的不同手机，我们要给我们的项目中去进行响应式布局。

rem适配方案

原生rem写法

注意： 1rem 的大小 = 根元素html的font-size的字体大小

<script>
    // 页面重置事件
    get()
    window.onresize = function() {
        get()
    }
    function get() {
        let h = document.documentElement.clientWidth // html的宽度
        let b = document.body.clientWidth            // body的宽度
        let height = h || b
        document.documentElement.style.fontSize = height/15 + 'px'
        // 1rem = 根元素html的font-size字体大小
    }
</script>

插件

1. 安装插件

• postcss-pxtorem 将px单位转换成rem单位
• lib-flexible 用于设置rem基准值(配置根元素字体大小)

安装：cnpm install lib-flexible postcss-pxtorem@5.1.1 --save-dev

2. 在main.js引入

import 'lib-flexible/flexible';  // 导入配置根节点字体大小的方法

3. 创建配置文件
   在vue2中,根目录创建.postcssrc.js文件

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-pxtorem': {
      // rootValue: 422.4,//对应设计图宽度4224*1296
      // rootValue: 192,//对应设计图宽度1920*1080
      rootValue: 75,	// 1rem = 75px
      propList: ['*', '!border*'] 
      //  表示不匹配 要是想匹配边框之类的 可以在里面用 !border* 表示不配备边框，这样不会把边框1px变成1rem
    }
  }
}

在vue3中,根目录创建postcss.config.js文件

// postcss.config.js
module.exports = {
    plugins: {
      // postcss-pxtorem 插件的版本需要 >= 5.0.0
      'postcss-pxtorem': {
        rootValue({ file }) {   
        // 判断是否是vant的文件 如果是就使用37.5为根节点字体大小
        // 否则使用75 
          return file.indexOf('vant') !== -1 ? 37.5 : 75;
        },
        // 配置哪些文件中的尺寸需要转换为rem *表示全部都要转换
        propList: ['*'],
      },
    },
  };

不匹配，如果不想将px变成rem

.no {
  border: 1px solid black; /*no*/
}

vm适配方案

vh 视窗高度单位，1vh等于可视区高度的百分之一
vw 视窗宽度单位，1vw等于可视区宽度的百分之一；
vm 是css3新单位，相对于视口的宽度或高度中较小或较大的那个,兼容性较差。

---

严格来说，vm并不是长度单位，他是vmax和vmin这两个长度单位的一个总称。

1. 安装插件

npm install postcss-px-to-viewport -D

2. 修改.postcssrc.js文件

module.exports = {
 plugins: {
   autoprefixer: {
     overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
   },
   'postcss-px-to-viewport': {
     viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
     unitPrecision: 3,      // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
     viewportUnit: 'vw',   // 指定需要转换成的视窗单位，建议使用vw
     selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
     minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
     mediaQuery: false // 允许在媒体查询中转换`px`
   }
 }
}

3. 删除原来配置rem代码