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

html-css026

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

首先,我们要知道浏览器是不会直接识别CSS相对单位的。我们应该清楚浏览器在拿到相对单位以后是怎样换算成最终可以识别的px形式的。

接下来简要介绍一下这几个相对单位,然后用一个例子来让大家清楚换算过程。

1. em

一般情况下,em是参考父级的字体大小来进行换算的。但是,对于长度(length,width,padding或者margin),这个单位参考的是当前的字体大小来换算的。

2. rem

rem是参考根级字体大小来换算的。

3. vh和vw

vh和vw都是根据视见区(view port)的百分比来计算的。

举个例子(一个例子说明以上几个相对单位的换算):

总结:

1. 浏览器的默认字体大小是16px

2. 百分数和相对单位都会最终被换算成px。因为浏览器只能识别px;

3. em在用于长度单位的时候,参考的是当前的字体大小而非父级字体(这里很容易混淆)。

vw和vh是相对于视口(viewport,也可以叫做视区、视界或可视范围)的宽度和高度。由于现在移动设备(主要是手机)的屏幕尺寸千差万别,如果仍然根据屏幕的物理分辨率来设计网页,效果会很难统一,因此html5和css3引入视口的概念来代替显示器的物理尺寸。通过在meta标签上的设置,视口的长宽可以跟设备的物理分辨率相等,也可以不相等(以便手机上可以实现用两个手指来放大会缩小页面),可根据需要灵活掌握。在PC中,视口的长宽则是跟浏览器窗口的物理分辨率恒等的。

1vw等于视口宽度(viewport width)的百分之一,也就是说100vw就是视口的宽度。同理,1vh等于视口高度(viewport height)的百分之一。