当前位置: 首页 > Web前端 > vue.js

在vue中使用rem布局

时间:2023-03-31 22:13:23 vue.js

使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码:fnResize();window.onresize=function(){fnResize();}functionfnResize(){vardeviceWidth=document.documentElement.clientWidth||window.innerWidth;如果(设备宽度>=750){设备宽度=750;}if(deviceWidth<=320){deviceWidth=320;}document.documentElement.style.fontSize=(deviceWidth/7.5)+'px';}vuecli3.0rem使用先安装amfe-flexible插件,import1,npmiamfe-flexible2,import'amfe-flexible'inmain.js然后,安装postcss-px2rem插件npmipostcss-px2rem在package.json中配置"postcss":{"plugins":{"autoprefixer":{},"postcss-px2rem":{"remUnit":37.5}}}说明,我这里使用的是vue-cli3.0脚手架。在.vue文件中。样式直接写px单位就可以了。在浏览器中查看时,它会自动转换为rem单位。如果字体还是要用px。然后像这样将px大写。它不会被编译为rem单元。样式可以达到px。