VUE移动端和PC端适配方案总结

移动端和PC端适配采用的方案,之前做大屏的时候设计稿是以1920*1080的尺寸设计的，考虑到市面上的显示其尺寸包括宽为1360、1440、1600、1660这几个尺寸，我在做适配的时候基本都是使用百分比和calc的方式做自适应，在PC端基本没有问题，实际的大屏分辨率也都是1920*1080的，所以一直都没有问题，这次大屏客户的屏幕是3840*2160的分辨率，是之前的2倍，显示效果可想而知，与设计相差太多，所以从新考虑了适配方案，采用postcss-px2rem的方案

前提：项目是使用官网的方式创建的vue2.0版本的项目

项目目录

大屏页面

这个方案主要分两步：这两步是完全独立的过程但又互相影响
1、根据分辨率动态设置html的字体大小；
2、引入postcss-px2rem将css中的px转成rem；

html设置字体大小

有两种方式为根节点html动态设置字体大小，

第一种：使用lib-flexible.js设置

这个插件是淘宝团队开发的，主要应用于移动端，代码中有一段限制了字体动态设置的屏幕大小是540px，也就是说大于540px之后html的字体大小就不变了。

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

所以在移动端可以直接引用这个文件
下载方式：执行yarn add lib-flexible
引入方式：在main.js中通过import 'lib-flexible'引入
计算规则：他会给html设置字体大小为当前屏幕宽度除以10的大小，比如iphone手机的屏幕物理像素是375*667，那html的字体大小就是37.5px。

第二种：模仿lib-flexible自己写一个

lib-flexible只适用于移动端，所以PC端需要模仿flexible自己按需求写一个，网上有很多这种代码，思路都是根据浏览器可视区的大小动态设置根节点html的字体大小，我暂且把文件命名为rem.js

// 基础字体大小
const baseValue = 75
// 可视区的大小，移动端是屏幕的宽度，PC端是浏览器可视区的宽度
let clientWidth = 0
// 设计稿的宽度
const designWidth = 1920
// 设置 rem 函数
function setRem () {
    // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
    clientWidth = document.documentElement.clientWidth
    const scale = clientWidth / designWidth
    // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
    document.documentElement.style.fontSize = baseValue * scale + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}

这种方式更适用于PC端，baseValue可以随意调整，但要跟postcss插件配合使用

配置postcss-px2rem

把px转换成rem的工具有两个，一个是post-css2rem另一个是postcss-pxtorem，两个用哪个都行，但是我看postcss-px2rem五年没有跟新了，本着有新的不用旧的原则，我把px2rem换成了pxtorem，具体有啥区别我也不知道，反正效果就是把px转成rem，结果都一样
先说postcss-px2rem
下载方式： yarn add postcss-px2rem
配置方式：在跟目录下新建vue.config.js文件，复制下面代码上去

// 引入等比适配插件
const px2rem = require('postcss-px2rem')

// 配置基本大小
const postcss = px2rem({
    // 基准大小 baseSize，需要和rem.js中相同
    remUnit: 75
})

module.exports = {
    lintOnSave:true,
    css:{
        loaderOptions:{
            postcss:{
                plugins:[postcss]
            }
        }
    }
}

再说说postcss-pxtorem
下载方式： yarn add [email protected],我的项目执行yarn add postcss-pxtorem默认下载的是6.0版本结果运行不起来，所以我降低了版本
配置方式：在跟目录下新建postcss.config.js文件，复制下面代码上去,或者在vue.config.js中像px2rem那么配置也是可以的

//在postcss.config.js中配置
module.exports = {
    "plugins": {
        "postcss-pxtorem": {
            //换算基数，默认100，把根标签的font-size规定为1rem为50px,在设计稿上量出多少px直接在代码中写多少px
            rootValue: 75,
            //保留rem小数点多少位
            unitPrecision: 5,
            //存储将被转换的属性列表，'!font-size' 即不对字体进行rem转换
            propList: ['*', '!border', '!font-size'],
            //要忽略并保留为px的选择器，例如fs-xl类名，里面有关px的样式将不被转换，支持正则写法。
            selectorBlackList: ['.radius'],
            replace: true,
            //（布尔值）媒体查询( @media screen 之类的)中不生效
            mediaQuery: false,
            //设置要替换的最小像素值，px小于12的不会被转换
            minPixelValue: 12,
            //默认值是一个空数组，这意味着禁用白名单并启用所有属性
            //propWhiteList: [],
            //黑名单
            propBlackList: ['font-size'],
        }
    }
}

或者

//在vue.config.js中配置
// 引入等比适配插件
const pxtorem = require('postcss-pxtorem')

// 配置基本大小
const postcss = pxtorem({
    //换算基数，默认100，把根标签的font-size规定为1rem为50px,在设计稿上量出多少px直接在代码中写多少px
    rootValue: 75,
    //保留rem小数点多少位
    unitPrecision: 5,
    //存储将被转换的属性列表，'!font-size' 即不对字体进行rem转换
    propList: ['*', '!border', '!font-size'],
    //要忽略并保留为px的选择器，例如fs-xl类名，里面有关px的样式将不被转换，支持正则写法。
    // selectorBlackList: ['.radius'],
    // 是否删除px的原有样式
    replace: true,
    //（布尔值）媒体查询( @media screen 之类的)中不生效
    mediaQuery: false,
    //设置要替换的最小像素值，px小于12的不会被转换
    minPixelValue: 12,
    //默认值是一个空数组，这意味着禁用白名单并启用所有属性
    // propWhiteList: [],
    //黑名单
    // propBlackList: ['font-size'],
})

// 使用等比适配插件
module.exports = {
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    postcss
                ]
            }
        }
    }
}

这两个post插件的计算规则都是一样的，remUnit和rootValue的性质相同，转换规则就是将你页面的样式除以这个值，比如你页面的某个元素设置成宽度750px，那么除以这个值就会转换成10rem，这个值是不变的，不随浏览器可视区的宽度变化而变化，在1920的显示器上转成10rem，在1360的显示器上也转成10rem

lib-flexible与postcss如何配合使用

所以postcss需要跟flexible配合使用,我们先定义几个变量，然后缕清这几个变量之间的关系

clientWidth      //屏幕的宽度
designWidth      //设计稿的宽度
rootValue        //postcss中配置的数值
baseValue        //在自己编写的rem.js文件中的基础数值

以1920*1080尺寸的设计稿为例：假如页面有一个填满屏幕宽度的元素，元素的宽度就是designWidth
该元素通过postcss转化后的rem大小：designWidth/rootvalue，无论屏幕如何缩放，该值是固定的
既然该值是固定的，那么实现适配就是通过动态改变html的字体大小实现的
首先计算缩放比，因为基础是1920的尺寸，在其他尺寸的屏幕就需要等比放大或缩小
缩放比：scale = clientWidth / designWidth缩放比就是实际的屏幕宽度除以设计稿的宽度，如果实际宽度就是1920，那么scale就是1，即不缩放；如果实际屏幕是3840，那么scale就是2，即放大一倍
字体大小设置：baseValue * scale 也就是clientWidth / designWidth * baseValue
字体大小与post转化后的rem相乘就应该等于clientWidth，所以
(clientWidth / designWidth * baseValue)*(designWidth/rootvalue) = clientWidth
最后你会发现baseValue/rootvalue = 1,也就是相等，所以在实际设置中，使用上述rem.js的计算方式，只要保证baseValue和rootvalue相等就可以了
如果上面的方法很难理解的话，有一种实践出真知的方式
就是放到浏览器中测试一下，比如我的设计稿是1920*1080的，那么我就把浏览器调到1920宽，然后看html的字体大小是多少，这个字体大小就是postcss中的rootValue的值，我现在rem.js中代码执行完html设置的大小是75px，那么我postcss中的rootValue大小就应该是75