vh vw 是css一种新的长度单位
vh -- 视口高度被均分为100单位的vh,即 1vh == 1%视口高度。100vh == 视口的高度
vw -- 视口宽度度被均分为100单位的vw,即 1vw == 1%视口宽度。100vw == 视口的宽度
vmin -- 取vw或vh中较小的那一个
vmax -- 取vw或vh中较大的那一个
计算公式
和使用rem单位一样,vh vw也可以通过计算函数使用,这样更加方便。
Sass函数:
以移动端PSD设计稿 宽为750px,高为1250px为例。拿dom在设计稿内的尺寸比例 乘以 100vh/vw ,得到了在当前视口的尺寸占比。
@function vw($px) {
@return ($px / 750) * 100vw;
}
//有特殊要求也可以高度自适应,一般宽度自适应就可以了
@function vh($px) {
@return ($px / 1250) * 100vh;
}
使用:
只要输入在设计稿内的尺寸就好,个人认为比rem操作根字体大小实现自适应要好。
div {
height:vh(250);
width:vw(350);
}
使用工具 postcss-px-to-viewport
安装 npm install postcss-px-to-viewport --save
在postcss.config.js添加配置:
"postcss-px-to-viewport": {
viewportWidth: 375, // 视窗的宽度,对应的是我们设计稿的宽度,Iphone6的一般是375 (xx/375*100vw)
viewportHeight: 667, // 视窗的高度,Iphone6的一般是667
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
viewportUnit: "vw", // 指定需要转换成的视窗单位,建议使用vw
selectorBlackList: ['.ignore', '.hairlines'],// 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换`px`
}
配置完成后可以在项目组直接使用 px 单位,postcss-px-to-viewport 会转换为 vh、vw
网友评论