前端的适配就是在不同的设备之上都能有一个较为好的效果以及使用体验

先说说移动端的吧

移动端之前用uni-app写h5，小程序，app的话还是没怎么操心适配问题的，因为uni-app内置了一个upx(rpx),这个单位就相当于将屏幕宽度分成750等分，750rpx == 100vw ，设计稿是750的话，直接px换成rpx就行，十分简单，如图

rem

那我们直接写html或者Vue项目的话，一般常用的是rem解决方案

rem单位是根据根节点，也就是html节点的字体大小去计算的（还有一个em单位是根据父节点的字体大小计算，这个用得比较少）

但是html的字体大小是固定的默认的16px,这里写个试下

如何根据屏幕宽度动态设置html的字体大小呢

方案一

Vue里npm插件 amfe-flexible 下载并在main.js 引入即可让html字体大小根据屏幕宽度变化配置下面会详细写

方案二

自己写个方法去设置

 var docEl = document.documentElement;
    function setRemUnit() {
        var rem = docEl.clientWidth / 7.5; // 这个数值根据设计稿来配置
        docEl.style.fontSize = rem + 'px'
    }
    setRemUnit()
    window.addEventListener('resize', setRemUnit)
    window.addEventListener('pageshow', function (e) {
        if (e.persisted) {
            console.log(111);
            setRemUnit()
        }
    })

这个我个人比较推荐，比如上面这个写7.5的话，设计稿是750. 设计稿上100px的盒子代码里写1rem就行，用上面那个插件的话还得一堆配置什么的就比较麻烦

而且写响应式项目的话，还可以自己根据需求定义区间去设置html字体

方案三

还有一个比较简单的写法

 html {
        font-size: 13.33333vw;
 }

给html设置一个vw单位，不过数值就得自己去计算了像13.33333vw就是750设计稿的移动端

下面记录下vue2中插件的配置使用

1	`npm i -S amfe-flexible<br>npm install postcss-pxtorem -S -D`

main.js

1	`import` `'amfe-flexible'`

postcss.config.js(没有的话就自己在根目录创建一个，也可以在vue.config.js里去配置，这里不多赘叙)

module.exports = {
    plugins: {
        "postcss-pxtorem": {
            rootValue: 75,
            propList: ["*"],
            // 规则是class中包含的字符串，也可以是正则,如ui框架
            selectorBlackList:['el-']//
        }
    }
}

这样下载配置好两个包之后，他会根据屏幕宽度去更改html的字体大小，并把所有px 按比例转换成rem (可自定义忽略类名不转换)

接下来说说vw的方案

其实和rem原理是一样的，都是根据屏幕宽度去适配盒子大小什么的

比如一个盒子给了50vw,那这个盒子在各个设备上都是屏幕宽度的一半

但是我们开发不可能全部自己去手写vw单位，下面的是在vue项目中px转vw单位的配置

npm i postcss@8.4.12 postcss-import@11.0.0 postcss-loader@4.0.4 postcss-px-to-viewport@0.0.3 -D

2 postcss.config.js

module.exports = {
  plugins: {
    "postcss-import": {},
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer: {
      path: ["./src/*"],
    },
    "postcss-px-to-viewport": {
      viewportWidth: "750", // 视窗的宽度，对应设计稿的宽度
      // viewportHeight: "1080", // 视窗的高度
      unitPrecision: 5, // 指定px转换为视窗单位值的小数位数(因为无法整除)
      viewportUnit: "vm", // 指定需要转换成的视窗单位，使用vw
      selectorBlackList: [], // 指定不转换为视窗单位的类
      minPixelValue: 1, // 小于或等于1px不转换为视窗单位
      mediaQuery: false, // 允许在媒体查询中转换px
      exclude: /(\/|\\)(node_modules)(\/|\\)/, // 不包含node_modules文件
    },
  },
}