使用vue-cli3.0搭建适配移动端的项目
适配移动端,禁止用户缩放页面
meta标签中的content属性里有一个width=device-width的值,这个值就是用来告诉浏览器,该页面将要使用设备的宽度来解析,后面的属性值则是告诉该页面:
user-scalable=no 禁止用户缩放页面
initial-scale=1.0 页面初始倍数为1倍
maximum-scale=1.0 页面可放大的倍数为1倍
minimum-scale=1.0 页面可缩小的倍数为1倍
PS:meta属性一样作用与Pad平板设备
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
vue-cli3.0结合lib-flexible, px2rem 实现移动端适配。
第一部分:项目中引入 lib-flexible
1.项目中安装 lib-flexible
npm install lib-flexible --save
二、在项目的入口 main.js 文件中引入 lib-flexible
import ‘lib-flexible’
第二部分:使用postcss-px2rem自动将css中的px转换成rem
1.安装 postcss-px2rem
npm install postcss-px2rem --save-dev
2.项目部署 postcss-px2rem
在 vue.config.js 中配置(如果没有自己手动创建)
module.exports = {
css: {
loaderOptions: {
postcss: {
// 这是rem适配的配置 注意: remUnit在这里要根据lib-flexible的规则来配制,如果您的设计稿是750px的,用75就刚刚好。
plugins: [
require('postcss-px2rem-exclude')({
remUnit: 75
})
]
}
}
}
}