1.在public里面的index.html添加
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
2.vue-cli3.0结合lib-flexible, px2rem 实现移动端适配。
第一部分:项目中引入 lib-flexible
npm install lib-flexible --save
3.在项目的入口 main.js 文件中引入 lib-flexible
import ‘lib-flexible’
第二部分:使用postcss-px2rem自动将css中的px转换成rem
npm install --save-dev postcss-loader postcss-px2rem
在 vue.config.js 中配置(如果没有自己手动创建)
module.exports = {
css: {
loaderOptions: {
css: {
// options here will be passed to css-loader
},
postcss: {
// options here will be passed to postcss-loader
plugins: [require('postcss-px2rem')({
remUnit: 75 //说明1rem为75px
})]
}
}
}
}
**2.使用 postcss-px-to-viewport 注意:移动端用方便,不过在pc端会出新字体过大的现象
npm install postcss-px-to-viewport 或者 yarn add postcss-px-to-viewport
package.json中,在postcss中添加代码:**
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px-to-viewport": {
"viewportWidth": 750,
"minPixelValue": 1
}
}
},