Vue CLI3 移动端适配和加后缀

一、amfe-flexible
1.首先把安装amfe-flexible，这里使用npm install

nnpm i
amfe-flexible -S

2.在项目入口文件main.js 中引入amfe-flexible

import 'amfe-flexible'

3.在根目录的index.html 的头部加入手机端适配的meta代码

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

PostCSS介绍
Vue CLI 内部使用了 PostCSS，默认开启了autoprefixer

配置方法
通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。
1.在package.json配置

 "postcss": {
"plugins": {
"autoprefixer": {
"browsers": [
"Android >= 4.0",
"iOS >= 7"
]
},
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": [
"*"
]
}
}
},

2.也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。

//vue.config.js
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer({
browsers: ['Android >= 4.0', 'iOS >= 7']
}),
pxtorem({
rootValue: 37.5,
propList: ['*'],
})
]
}
}
}
}

配置autoprefixer (浏览器前缀规则)
使用 package.json 的 browserslist 字段postcss.config.js

// postcss.config.js
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}

配置 postcss-pxtorem
postcss-pxtorem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据标签的font-size值来计算出结果，1rem=html标签的font-size值。代码中写px单位，浏览器中从px转换成了rem

npm install --save postcss-pxtorem

最后

以上就是害羞冰淇淋为你收集整理的Vue CLI3 移动端适配和加后缀的全部内容，希望文章能够帮你解决Vue CLI3 移动端适配和加后缀所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。