vue cli3项目使用rem和vw实现自适应的方法

vue cli3项目使用rem和vw实现自适应的两种方法

前言

之前我写过两篇cli2项目自适应配置的文章,不过现在遇到的vue项目大多是cli3项目所以觉得有必要总结一下cli3项目自适应方法,
在网上找了一篇不错的文章

安装配置

vue-cli3 构建的项目相较于vue-cli2 构建的项目精简了许多，将一些默认配置进行了更好更严密，让开发变得更高效的封装。

一. 使用postcss-px2rem自适应

1. 安装 flexible和 postcss-px2rem(npm安装方式 flexible适用于移动端自适用)

npm install lib-flexible --save
npm i postcss-px2rem --sav

flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。同时flexible.js文件中封装这refreshRem方法,与页面监听事件绑定,可以动态设置根元素的font-size.
postcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据标签的font-size值来计算出结果，1rem=html标签的font-size值,相当于单位转换器.

注意:如果lib-flexible插件安装不上,可以去下载lib-flexible.js文件,下载地址,在html文件中手动标签引用.

<meta name="viewport" content="width=device-width,initial-scale=1.0">

2, 引入lib-flexible

在项目入口文件main.js 中引入lib-flexible

import 'lib-flexible'

注意事项（important）: 由于flexible会动态给页面header中添加标签，所以务必请把目录 public/index.html 中的这个标签删除！！！
我看有的文章还有一步修改flexible.js文件的步骤(通过观察方法中的代码发现,refreshRem方法绑定在页面监听事件上,大致的逻辑是页面发生变化时,根据页面宽度和设备dpr动态设置根元素font-size值,达到页面自适应的目的)
把540改成width就是这个目的.如果不改动在width / dpr > 540的情况下,根元素的font-size是固定值,不能达到自适应目的.
如果是通过手动下载flexible.js文件,不用修改此文件.(我发现如果是PC端自适用推荐手动下载,如果是移动端推荐使用npm,npm安装的js文件中,font-size设置把dpr因素也考虑进去了)
手动下载flexible.js相关代码:
在这里插入图片描述

设置flexible.js的宽度根据屏幕大小自动适配，修改flexible.js 文件，（全局搜索 flexible.js
修改后代码：

function refreshRem(){
	var width = docEl.getBoundingClientRect().width;
	if (width / dpr > 540) {
	    width = width * dpr;
	}
	var rem = width / 10;
	docEl.style.fontSize = rem + 'px';
	flexible.rem = win.rem = rem;
}

3, 配置postcss-px2rem

px2rem的配置放在vue-cli3 项目中vue.config.js中（如果找不到此文件,可能你是一个新构建的项目，需要手动在项目根目录创建vue.config.js）

module.exports = {
    css: {
        loaderOptions: {
          css: {},
          postcss: {
            plugins: [
              require('postcss-px2rem')({
                remUnit: 37.5
              })
            ]
          }
        }
    },
}

PS：remUnit这个配置项的数值是多少呢？？？通常我们是根据设计图来定这个值，原因很简单，便于开发。假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。

那为什么在这里写成了37.5呢？？？

之所以设为37.5，是为了引用像mint-ui这样的第三方UI框架，因为第三方框架没有兼容px2rem ，将remUnit的值设置为设计图宽度（这里为750px）75的一半，即可以1:1还原mint-ui的组件，否则会样式会有变化，例如按钮会变小。

既然设置成了37.5 那么我们必须在写样式时，也将值改为设计图的一半。

二. 使用vw自适应

1.安装需要的插件（由于cli3的一些配置有过修改，npm 的库也相应多了）

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano postcss-import postcss-url --S

2.在根路径下的postcss.config.js配置如下

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": {
      utf8: false
    },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750,     // (Number) The width of the viewport.
      viewportHeight: 1334,    // (Number) The height of the viewport.
      unitPrecision: 3,       // (Number) The decimal numbers to allow the REM units to grow to.
      viewportUnit: 'vw',     // (String) Expected units.
      selectorBlackList: ['.ignore', '.hairlines'],  // (Array) The selectors to ignore and leave as px.
      minPixelValue: 1,       // (Number) Set the minimum pixel value to replace.
      mediaQuery: false       // (Boolean) Allow px to be converted in media queries.
    },
    "postcss-viewport-units":{},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false
    }
  }
}

3.启动npm run serve会发现报 Cannot load preset “advanced”. Please check your configuration for errors and try again错

这是就需要在安装一个cssnano-preset-advanced插件

npm i cssnano-preset-advanced --save-dev

4.再次启动，所有的css的px都变为vw单位

5.引入兼容性方案

①引入viewport-units-buggyfill.js和viewport-units-buggyfill.hacks.js两个js https://github.com/rodneyrehm/viewport-units-buggyfill
②调用

<script>
    window.onload = function () {
        window.viewportUnitsBuggyfill.init({
            hacks: window.viewportUnitsBuggyfillHacks
        });
    }
</script>

cli3的vw配置到此也就结束了。如果在项目中仍然需要使用px可以加class为.ignore或.hairlines(.hairlines一般用于设置border-width:0.5px的元素中) 还有更多内容还是看原文《如何在Vue项目中使用vw实现移动端适配》。