介绍一些 CSS3 新增的单位,平时可能用的比较少,但是由于单位的特性,在一些特殊场合会有妙用。
vw and vh
- 1vw 等于1/100的视口宽度 (Viewport Width)
- 1vh 等于1/100的视口高度 (Viewport Height)
- JS中文网 – 前端进阶资源分享 www.javascriptc.com 趣聊CSS系列
综上,一个页面而言,它的视窗的高度就是 100vh,宽度就是 100vw 。看个例子:
响应式web设计离不开百分比。但是,CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口(viewpoint)的宽度或者高度,而不是父元素的,那该肿么办? 这就是 vh 和 vw 单位为我们提供的。
1vh 等于1/100的视口高度。栗子:浏览器高度900px, 1 vh = 900px/100 = 9 px。同理,如果视口宽度为750, 1vw = 750px/100 = 7.5 px。
可以想象到的,他们有很多很多的用途。比如,我们用很简单的方法只用一行CSS代码就实现同屏幕等高的框。
.slide {
height: 100vh;
}
假设你要来一个和屏幕同宽的标题,你只要设置这个标题的font-size的单位为vw,那标题的字体大小就会自动根据浏览器的宽度进行缩放,以达到字体和viewport大小同步的效果。
vmin and vmax
vh和 vw 依据于视口的高度和宽度,相对的,vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值
- vmin — vmin的值是当前vw和vh中较小的值。
- vmax — vw和vh中较大的值。
这个单位在横竖屏的切换中,十分有用。
JS中文网(www.javascriptc.com)是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区.
在一些 Demo 示例,或者大页面中,我们经常都会看到上述 4 个单位的身影。灵活使用,就可以减少很多 CSS 的代码量。
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程
本文来源于网络,其版权属原作者所有,如有侵权,请与小编联系,谢谢!
转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com
标题:【趣聊Css-12】网页适配vh、vw、vmin、vmax 知多少?
链接:https://www.javascriptc.com/556.html
原文链接:https://github.com/chokcoco/iCSS/issues/15