vue3.0自适应分辨率 px自动转化rem

vue3.0自适应分辨率 ,px自动转化rem,以设计图1920*1080为准。

前景:直接量设计图的px写上去就行,比如设计图量的是20px;直接就写20px;会在浏览器上会自动转化成rem。

步骤一:安装依赖

//PC端不要安装lib-flexible,没啥效果 
npm i lib-flexible-computer -S
npm i px2rem-loader -D
npm i postcss-px2rem

步骤二:在main.js里引入

import "lib-flexible-computer";

步骤三:在vue.config.js里加入

module.exports = {
	css: {
	   loaderOptions: {
            postcss: {
                plugins: [
                    require("postcss-px2rem")({
                        remUnit: 192   //设计图宽度/10
                    })
                ]
            }
        }, //css预设器配置项
	}
}

效果:记得重启
vue3.0自适应分辨率 px自动转化rem_第1张图片

在这里插入图片描述

你可能感兴趣的:(封装组件,工作遇到的问题,javascript,前端,vue.js)