什么是vw(Viewport Width)和vh(Viewport Height)?
vw和vh是前端开发中的一个动态单位,是一个相对于网页视口的单位。
系统会将视口的宽度和高度分为100份,1vw占用视口宽度的百分之一,1vh占用视口高度的百分之一。
vw、vh和百分比不同的是,百分比永远都是以父元素为参考,而vw、vh是以视口作为参考。
结论:vw、vh是一个动态的单位,会随着视口的变化而变化(相对单位)。
我个人在做Vue项目的时候,一边想用vw、vh进行布局,一边又觉得px布局方便,因为蓝湖上边的切图是直接有视图的px大小。
所以就想如果有一个方案可以解决px转换为vw vh就太好不过了,我这边是直接在**.postcssrc.js**里边进行配置,下边是我的代码,大家可以参考一下,有问题请指出问题
- npm i postcss-px-to-viewport -D
- 在项目根目录下添加.postcssrc.js文件
- 添加如下配置:
const path = require('path');
module.exports = ({ file }) => {
const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 1366 : 1920;
return {
plugins: {
autoprefixer: {},
"postcss-px-to-viewport": {
unitToConvert: "px", // 要转化的单位
viewportWidth: designWidth, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度,即小数点位数
propList: ["*"], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
viewportUnit: "vw", // 指定需要转换成的视窗单位,默认vw
fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位,默认vw
selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名,
minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
replace: true, // 是否转换后直接更换属性值
exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配
landscape: false // 是否处理横屏情况
}
}
}
}
添加完配置之后需要重新运行
这个方案可以在我的Vue项目中直接把px单位转换为vw、vh
转载:https://www.cnblogs.com/ljyn/p/15229148.html