Question

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

比如
font-size:5vw;那么横着拉窗口字体会变大变小 竖着拉不动,有没有办法同时使用vw和vh作为单位?让他横着竖着拉都会动?

Answer 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网页链接

Answer 2

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

追问

js我还不太不会啊 要不你来一段

追答

ie obj.currentStyle方法，而FF用getComputedStyle 方法 这可以获得css的属性
之后你动态更新就行了
不过我没用过vw盒vh 一般是px rem em