css中vh和vw、vmin和vmax原理及详解

时间:2020-05-08 14:29:28 来源:巅峰霸主 作者:烈火大地 点击:
摘要:在css3中出现的这个新属性,真的很好用,vh,vm,vmin,vmax均表示视窗的宽高,还可以使用calc来进行相对计算,通过本文可以掌握相关的用法,加深理解……

vh和vw

响应式网页设计技术很大程度上依赖于比例规则。然而,CSS比例不总是每个问题的最佳解决方案。CSS宽度是相对于最近的包含父元素。如果你想使用显示窗口的宽度或高度而不是父元素的宽度将会怎么样?这正是vh和vw单位所提供的。

vh等于viewport高度的1/100.例如,如果浏览器的高是900px,1vh求得的值为9px。同理,如果显示窗口宽度为750px,1vw求得的值为7.5px。

这些规则表面上看起来有无尽的用途。例如,做一个占满高度的或者接近占满高度的幻灯片,可以用一个非常简单的方法实现,只要用一行CSS:

.slide {height: 100vh;}

设想你想要一个占满屏幕宽度的标题。为做到这一点,你将会用vw来设置一个字体大小。这个大小将会随着浏览器的宽度按比例缩放。


vmin 和 vmax

vh和vm总是与视口的高度和宽度有关,与之不同的,vmin和vmax是与这次宽度和高度的最大值或最小值有关,取决于哪个更大和更小。例如,如果浏览器设置为1100px宽、700px高,1vmin会是7px,1vmax为11px。然而,如果宽度设置为800px,高度设置为1080px,1vmin将会等于8px而1vmax将会是10.8px。

所以你什么时候可能用到这些值?

设想你需要一个总是在屏幕上可见的元素。使用高度和宽度设置为低于100的vmin值将可以实现这个效果。例如,一个正方形的元素总是至少接触屏幕的两条边可能是这样定义的:

.box {
    height: 100vmin;
    width: 100vmin;
   }

vmin

如果你需要一个总是覆盖可视窗口的正方形(一直接触屏幕的四条边),使用相同的规则只是把单位换成vmax。

.box {
    height: 100vmax;
    width: 100vmax;
   }

vmax

这些规则的组合提供了一个非常灵活的方式,用新的、令人兴奋的方式利用你的可视窗口的大小。

(责任编辑:陆柏熺)
相关分类: vh vm vmin vmax
评价:
用户名: 验证码: 看不清?点击更换

相关内容推荐

关注站长自媒体 获取更多优质内容

2019-2020 ©巅峰霸主网 京ICP备12023415号-2
返回顶部