vue-cli脚手架,怎么做移动端H5的多屏适配?

(1)安装lib-flexible
npm i lib-flexible --save
(2)在main.js中引入
// 导入屏幕适配模块
import ‘lib-flexible/flexible.js’
(3)在index.html中设置手机端适配的meta的代码

(4)安装px2rem-loader 使用flexible插件时 会自动把px转换成rem单位时,我们将使用px2rem这个工具 npm install px2rem-loader

(5)配置px2rem-loader
vue-cli脚手架,怎么做移动端H5的多屏适配?_第1张图片

var px2remLoader = {
loader: ‘px2rem-loader’,
// 以设计稿的1/10为基准 1rem = 75px
options: {
remUnit: 75
}
}
放在cssLoaders里面进行导出,并且填上

vue-cli脚手架,怎么做移动端H5的多屏适配?_第2张图片

你可能感兴趣的:(前端框架,vue,移动端)