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

html-css014

CSS3中如何同时使用VW和VH作为单位?,第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网页链接

rem:移动端布局,根据根节点字体大小,具体可参考淘宝移动端解决法案,根据设备dpr;

em:类似rem,不过是根据父节点字体大小

vw,vh :viewport height和viewport width。1vw就是viewport width的1%。