1.安装扩展插件:px to rem & rpx & vw (cssrem)
2.在扩展设置中 基准font-size(单位:`px`), default: 16 改成 80 ,然后重启vscode
3.npm安装适配插件
npm install lib-flexible --save
4.找到node_modules下的lib-flexible文件夹下的 flexible.js文件
注释掉
// if (width / dpr > 540) {
// width = 540 * dpr;
// }
并把 var rem = width / 10;改为 var rem = width / 24;
// var rem = width / 10;
把10改为24
var rem = width / 24;
5.main.js中全局引入 import 'lib-flexible/flexible.js'
6. 新建公共css文件 写入媒体查询:
@media screen and (max-width: 1024px) {
html {
font-size: 42.66px !important;
}
}
@media screen and (min-width: 1920px) {
html {
font-size: 80px !important;
}
}
7.全局引入css文件:import '@/assets/css/index.css'