vue自适应比例前端开发

前端开发中，根据UI提供的设计稿通常也需要根据不同分辨率自适应比例开发
在拿到UI设计稿时，UI通常时根据某一个分辨率（例如：1920*1080）设计的设计稿，但是在开发过程中，需要适配不同浏览器，固定的1920分辨率下使用px像素开发，就会存在一些形变的问题；

一、提出问题

例如在1920分辨率中存在内边距padding： 40px；但是在其他分辨率中（720），内边距padding： 40px这内边距就会显的很宽，需要根据比例将 1920下40px 缩小至720下15px。

二、解决思路

通过移动端rem思维来解决办法
在vue中引入插件：postcss-pxtorem、px2rem-loader来解决问题

三、具体开发代码

1、添加组件

-- 添加插件
-- npm
npm i postcss-pxtorem px2rem-loader --save
-- yarn 
yarn add postcss-pxtorem px2rem-loader -D

2、postcss.config.js配置

如果项目中不存在postcss.config.js文件，则在vue.config.js同目录下创建一个文件，代码如下

const autoprefixer = require('autoprefixer');
const px2rem = require('postcss-pxtorem');
 
module.exports = {
    plugins: [
        autoprefixer(), 
        px2rem({ 
            rootValue: 192, //换算基数，把根标签的font-size规定为1rem为100px,在设计稿上量出多少px直接在代码中写多少
            unitPrecision: 5, //保留rem小数点多少位
            // propList: ['*', '!border', '!font-size']
            propList: ['*'], //  存储将被转换的属性列表，'!font-size' 即不对字体进行rem转换
            // selectorBlackList: ['.radius'], // 要忽略并保留为px的选择器
            // mediaQuery: false,//（布尔值）媒体查询( @media screen 之类的)中不生效
            // minPixelValue: 12,///设置要替换的最小像素值，px小于12的不会被转换
            // propBlackList: ['font-size'], //黑名单
        })
    ], 
};

4、rem.js

作用：切换页面时动态更新html(根标签)的font-size

const baseSize = 192
// 设置 rem 函数
function setRem() {
    // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920
    // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}

在main.js中引入rem.js

import './rem.js' //根据自己创建文件目录引入

四、配置完就可以直接用px做单位按照UI设计稿进行开发啦～