vw和vh是CSS中的相对单位，分别代表视口宽度和高度的百分比。1vw等于视口宽度的1%，1vh等于视口高度的1%。与百分比单位相比，vw始终基于视口宽度，而百分比则基于父元素尺寸。vmin和vmax用于响应式设计，选取视口的最小或最大尺寸。在处理移动端横屏和竖屏适配时，vmin能保证元素大小的一致性。文章提供了将像素值转换为vw的计算方法，并举例说明了不同场景下的应用。
vw / vh
vw就是视口的宽度，vw 是个相对单位。
不管在什么屏幕下， 我们把屏幕分为平均的 100等份。
1vw = 1 / 100 屏幕的宽度
1vw 和 1%
width: 1vw;
width: 1%;
vw 和 1% 有没有区别：
-
vw 永远是以视口的宽度为准。· 在 375设计稿下， 1vw 永远是 3.75px
-
百分比以父盒子为准。 假如父盒子是 200px，则 1% 是 2px
px 如何转为vw
我们设计稿是 iphone 678 是 375px， vw 把屏幕划分了100等份， 则 1vw = 3.75 px
有个盒子啊，我测量了下，他的宽度是 3.75px * 3.75px ，则 写成 vw 是多少？ 1vw * 1vw
又一个盒子，宽度和高度分别是 37.5px 和 37.5px ，则 转换为vw 是多少？ 10vw * 10vw
有一个盒子 68px * 29px ，则我们写代码 less vw ？
width: (68 / 3.75vw);
height: (29 / 3.75vw);扩展vmin和vmax 作用:解决移动端横屏和竖屏宽高不一致的问题
100vmin指的是屏幕宽和高中较小的那个值 375 667 竖屏 取375 宽 横屏375高 100vmax指的是屏幕宽和高中较大的那个值 375667 竖屏 取667高 横屏667宽
vmin和vmax一般推荐使用vmin可以解决移动端横屏文字显示不一致的问题,替换vw即可
6994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
