前言在前端项目中，难免会遇到这种问题。构建页面时，显示比例可能正常，但如果缩放页面，或将页面移植到其他尺寸的屏幕上，显示的UI效果就会变形。传统的方法是执行媒体查询。不过我目前做的项目量不是很大，想用一种新的方式适配屏幕以下是我个人在Vue项目中的适配方法。我个人测试用的是ant-design-vue和element-ui组件库还是可以的。但是，这种方法不能改变行间样式。比如element-ui表单组件的label，添加了行间样式。这时候不能用下面的方法适配，所以这个需要自己解决。虽然我们已经适配了，但是我们还是建议大家在写CSS的时候使用rem作为单位。接下来是我使用的屏幕适配方法1.安装下面两个依赖npminstallpostcss-px2rempx2rem-loader--save2。在根目录src新建rem.js比例适配文件直接复制以下代码//rem比例适配配置文件//basesizeconstbaseSize=16;//setremfunctionfunctionsetRem(){//当前页面屏幕分辨率相对于1280宽缩放，可以根据需要修改constscale=document.documentElement.clientWidth/1280;//设置页面根节点的字体大小（"Math.min(scale,3)"表示最大放大倍数为3，可根据实际业务需要调整）document.documentElement.style.fontSize=`${baseSize*Math.min(scale,3)}px`;}//初始化setRem();//重置remwindow.onresize=()=>{setRem();};3.在main.js中引入适配文件4.修改vue.config.jsless不用复制，直接复制postcss//引入比例适配插件constpx2rem=require('postcss-px2rem');//配置基本尺寸constpostcss=px2rem({//BaseSize,需要和rem.js中一样remUnit:16,});module.exports={css:{loaderOptions:{less:{javascriptEnabled:true,},postcss:{plugins:[postcss,],},},},};end祝大家开发越来越顺利
