vue中使用rem布局的两种方法，亲测好用

[大盗夕落]

VUE 中使用REM布局 在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码: fnResize(); window.onresize = function () { fnResize(); } function fnResize() { var deviceWidth = document.documentElement.clientWidth || window.innerWidth; if (deviceWidth >= 750) { deviceWidth = 750; } if (deviceWidth <= 320) { deviceWidth = 320; } document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'; } 然后在写css就可以将px单位换成rem. 这里设置的比例是100px=1rem, 例如:宽度为100px时,可以直接写成1rem ============================================================= 2==vue cli3.0 rem 使用 vue cli3.0 rem 使用 首先安装amfe-flexible插件，在main.js里引入 1、npm i amfe-flexible 2、import 'amfe-flexible' 然后再，安装postcss-px2rem插件 npm i postcss-px2rem 在package.json中配置 "postcss": { "plugins": { "autoprefixer": {}, "postcss-px2rem": { "remUnit": 37.5 } } } 说明，我这里用的是vue-cli3.0脚手架。在.vue文件里。样式直接写px单位就可以了。在浏览器查看时会自动转换为rem单位。如果字体还想用px。那就这样将px大写。就不会编译为rem单位了。样式就可以实现px。