vw布局相信大家都只了解一些,1vw相当于屏幕百分之一的宽度,这里介绍的一个方法是通过一些依赖,让你在vue-cli开发移动端放心的使用px,原文出自https://www.w3cplus.com/mobile/vw-layout-in-vue.html,闲话不多说,上干货了。
首先,安装 postcss-px-to-viewport,这玩意就是核心 看名字很容易看出用途吧,把px转换成vw
npm install postcss-px-to-viewport --save-dev
安装完再进行一下配置,在哪里配置呢?就跟安装这个包名字前面类,既postcssrc.js
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
"postcss-px-to-viewport": {
viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
viewportUnit: "vw", //指定需要转换成的视窗单位,建议使用vw
selectorBlackList: ['.ignore', '.hairlines'],// 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换`px`
}
}
}
复制代码
现在就可以把项目跑起来看看了,是不是px变成vw了呢,不过只是这样使用,就太粗糙了,你会发现使用起来有很多问题,比如css兼容,元素容器宽高比例,伪类没办法转换等等; 看来是时候掏出其他部分了
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-cssnext postcss-viewport-units cssnano --save
自然配置也要相应增加
"plugins": {
"postcss-import": {},
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
viewportUnit: "vw", //指定需要转换成的视窗单位,建议使用vw
selectorBlackList: ['.ignore', '.hairlines'],// 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换`px`
},
"postcss-viewport-units": {},
"cssnano": {
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
}
}
复制代码
这就是这些东西的用处:
postcss-cssnext:其实就是cssnext。该插件可以让我们使用CSS未来的特性,其会对这些特性做相关的兼容性处理。有关于cssnext的每个特性的操作文档,可以点击这里浏览。
cssnano:主要用来压缩和清理CSS代码。在Webpack中,cssnano和css-loader捆绑在一起,所以不需要自己加载它。详细文档可以点击这里获取。在cssnano的配置中,使用了preset: "advanced",所以我们需要另外安装:
npm i cssnano-preset-advanced --save-dev
"cssnano": {
"autoprefixer": false,
"postcss-zindex": false
}
复制代码
上面的代码把autoprefixer和postcss-zindex禁掉了。前者是有重复调用,后者是一个讨厌的东东。只要启用了这个插件,z-index的值就会重置为1。这是一个天坑,千万记得将postcss-zindex设置为false。 postcss-viewport-units:用来处理伪类。
postcss-aspect-ratio-mini:主要用来处理元素容器宽高比。
有些人会安装 postcss-write-svg,用来处理1px问题,但是用less的时候这个地方会有些问题,我就不介绍了。1px的问题也有很多其他处理方法,让大家自由发挥吧。