vue在移动端H5实现自适应适配

260 阅读1分钟

1.安装淘宝镜像 npm install cnpm -g --registry=registry.npmmirror.com

cnpm install amfe-flexible --save //这个插件是宽高变化时改变html的fontSize大小 cnpm install postcss-pxtorem --save-dev //这个插件是你写的px代码会自动转换成rem,你在浏览器审查元素时才能发现

3.在 vue的main.js文件引入

import 'amfe-flexible'

image.png 4.在vue的根目录下 新建一个postcss.config.js文件 然后

module.exports={ plugins:{ autoprefixer:{}, "postcss-pxtorem":{ "rootValue":75, //设计稿宽度/10 这里设计稿是750px "propList":[''] // 这里是转换的属性,比如width height margin padding 你写代表的是全局所有属性 } } }

image.png 然后就可以用了这是测试结果

image.png