个人建议移动端最好使用vw,他们的优点和缺点自己可以在下面查一下
目标:在项目中加入vw的适配方案
VantUI中的所有组件都是以375的设计搞进行适配
大致步骤:
-
安装 postcss-px-to-viewport 插件
-
新建一个 postcss.config.js 的配置文件
-
添加插件配置 参考 浏览器适配
1.安装
npm install postcss-px-to-viewport --save-dev
2.配置 postcss.config.js
const path = require('path')
module.exports = ({ webpack }) => {
const designWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750
// 根据路径 输出不同的页面的设计尺寸. 我这里是判断路径是否包含xxx,如果包含就输出750px宽度的尺寸
return {
plugins: {
autoprefixer: {},
'postcss-px-to-viewport': {
viewportWidth: designWidth, // 750, //设计稿尺寸
exclude: /(\/|\\)(node_modules)(\/|\\)/ // 第三方UI组件单位不转vw
}
}
}
}
-
注意,该插件对行内样式无效,建议样式通过类来定义。
-
postcss 可以认为是后处理器,对css代码做后续的处理 (转单位,加私有前缀..)
这种配置也是有效的,建议使用这种
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 375,
exclude: /(\/|\\)(node_modules)(\/|\\)/ // 第三方UI组件单位不转vw
}
}
}
总结: 通过postcss-px-to-viewport插件解决移动端适配
rem适配
-
lib-flexible 用于设置 rem 基准值(动态)
作用:根据手机屏幕大小动态设置根HTML字体大小
安装:
# 修改rem基准值的js插件 npm i amfe-flexible -S
- 在
webpack.config.js
中配置postcss-loader
注:在使用webpack脚手架之后不需要设置这个
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname,"/dist"),
filename: "bundle.js"
},
module:{
rules:[
{
test: /\.css$/,
use: ['style-loader','css-loader','postcss-loader'] //配置postcss-loader
}
]
},
}
- 在项目根目录新建
.postcssrc.js
文件,在其中写入postcss-pxtorem插件配置
module.exports = {
"plugins": {
"postcss-pxtorem": {
rootValue: 75, //750的设计稿
propList: ['*']
}
}
}
入口文件main.js导入 amfe-flexible
import 'amfe-flexible'
注意:这个可能会出现些问题 建议使用vw适配