Vh和Vw的简介和使用

Vw:视区宽度百分值

Vh:视区高度百分值

Vmin:取Vw或Vh中较小的那一个

Vmax:取Vw或Vh中较大的那一个

1.视区:是指浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小

2.场景之元素的尺寸限制

我们应该都做过或见过这样的交互:点击下图,弹框查看原始大图;或者一屏内(不能有滚动条)大图幻灯片浏览。这类需求让人头疼的地方之一就是原始大图的尺寸限制问题——因为很有可能图片过大,尼玛一屏显示器区域不够放,我们需要对其进行缩放处理。这类限制的实现,在当下,需要获得图片的原始大小,以及浏览器内部尺寸,算大小,算比例等,算是比较折腾的。但是,vw, vh等单位本身就是浏览器视区大小相关单位,直接使用其做限制,岂不省了N多JS代码??img { max-height: 90vh; } 
这里写图片描述

3.基于vw的响应式排版和布局

一般而言,屏幕越大,我们希望文字大小也越大,元素的尺寸也能等比例放大,尤其在现在的网页设计风格中。

如果要实现这种弹性自适应效果,目前主流的实现是通过设定根元素的font-size大小,具体元素或模块使用rem或em单位来实现。 
一种是直接设定一个临界点字体大小,如: 
这里写图片描述
还有一种就是使用JS在resize或者屏幕旋转的时候,动态修改root的font-size大小。

前面一种基于@media的CSS实现问题在于,内容的弹性自适应只会在临界点的时候,“Duang”变化下,于是,我们浏览器尺寸拉伸的时候,会感受到类似“噔噔噔”卡壳的效果,感觉就像是吃了含笑半步癫,使用JS的问题在于他是JS,要保证加载体验,需要头部内联,为了保证实时性,需要多个浏览器变化事件监测,用我的口头禅讲就是“显得啰嗦”。 
那有没有两全其美的方法呢?

有,那就是本文要隆重请出场的vw,配合CSS3 calc计算实现动态字体大小效果。

例如,我们希望浏览器宽度在600px~1000px变化的时候,html根元素的font-size大小是18px~22px之间对应变化的,则可以: 
这里写图片描述
于是,理论上,一个18px~22px字体大小动态匹配的布局基础就建好了。

一般出现“理论上”这三个字,就说明我要“放坑”了,大家闪开~~

此“坑”就是苹果系统的Safari浏览器不认识上面的属性值(如下截图): 
这里写图片描述 
就Safari不行,window下的所有浏览器,包括IE,以及mac下的Chrome等浏览器都是可以正确解析的。好在,我们还是有办法曲线救国的。那就是,我们基础字体大小不使用像素单位,使用百分比单位即可,如下: 
这里写图片描述
有个动态的根字体大小,我们就可以使用rem或em这些相对单位,来让我们的页面排版和布局更富有弹性。 
更新于2017年2月8日 
经过大型项目实践,下面这段CSS是最好的基于rem和vm和calc实践代码: 
这里写图片描述
然后,就可以愉快地使用rem单位用来排版和布局啦!

你可能感兴趣的:(CSS)