CSS3中如何同时使用VW和VH作为单位?

2025-04-26 02:59:23
推荐回答(2个)
回答1:

不行的,建议使用rem然后通过js改变html标签的font-size实现

例如rem设计稿像你一样用100,那就font-size: 5rem;然后window添加事件监控设置window的最大宽度/100就是html标签的font大小

代码:

window.onresize = function () {

x = 100;

document.documentElement.style.fontSize = (document.documentElement.clientWidth / x + document.documentElement.clientHeight / x)/2 + "px";}

并且其实没有必要的,就用width宽度即可,高度不用管的

【CSS】

  • vmin

  • 视口高度和宽度之间的最小值的 1/100。

  • vmax

  • 视口高度和宽度之间的最大值的 1/100。

使用CSS的vmin(兼容性一般般)可以是:

【p {
font-size: 8vm;
font-size: 8vmin;
}】

如果视口的宽度是300mm,高度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200(最小的))/100,因为高度比宽度要小,所以计算的时候相对于高度。

使用CSS的vmin(兼容性超级一般般,IE11都不支持)可以是:

【p { font-size: 8vmax;}】

如果视口的宽度是300mm,高度是200mm,那么上述代码中h1元素的字号将为24mm,即(8x300(最小的))/100,因为高度比宽度要小,所以计算的时候相对于宽度。

参考资料:MOZ网页链接

回答2:

老铁 我没用过这单位,用js控制不行啊