Vue/cli4.0移动端适配

1,048 阅读1分钟

1、下载amfe-flexible用于适配移动端

npm install --save amfe-flexible

2、下载postcss-px2rem用于将PX转换成rem

npm install postcss-px2rem --save
两个插件都下载好后,package.json文件中会有这两个插件

image.png

3、在main.js文件引入amfe-flexible插件

image.png

4、在public文件下的index.html文件中加入meta

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
content属性值的解释:
 width:可视区域的宽度,值可为数字或关键词device-width
 height:同width
 intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
 maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,
 maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
 user-scalable:是否可对页面进行缩放,no 禁止缩放

image.png

5、在vue.config.js文件下配置设计稿尺寸

如果设计稿是375宽,remUnit属性就设置为37.5,目前配置完,页面就已经能自适应了,只需要按照设计稿的尺
寸把样式写上去就好,postcss-px2rem会自动把px转成rem,但是此时还不能修改样式热更新,还需要配置。

image.png

6、热更新

image.png