1. 首页

【趣聊Css-12】网页适配vh、vw、vmin、vmax 知多少?

介绍一些 CSS3 新增的单位,平时可能用的比较少,但是由于单位的特性,在一些特殊场合会有妙用。

vw and vh

  1. 1vw 等于1/100的视口宽度 (Viewport Width)
  2. 1vh 等于1/100的视口高度 (Viewport Height)
  3. JS中文网 – 前端进阶资源分享 www.javascriptc.com 趣聊CSS系列

综上,一个页面而言,它的视窗的高度就是 100vh,宽度就是 100vw 。看个例子:

CodePen Demo

响应式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则关于视口高度和宽度两者的最小或者最大值

  1. vmin — vmin的值是当前vw和vh中较小的值。
  2. vmax — vw和vh中较大的值。

这个单位在横竖屏的切换中,十分有用。

JS中文网(www.javascriptc.com)是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区.

在一些 Demo 示例,或者大页面中,我们经常都会看到上述 4 个单位的身影。灵活使用,就可以减少很多 CSS 的代码量。

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文来源于网络,其版权属原作者所有,如有侵权,请与小编联系,谢谢!

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:【趣聊Css-12】网页适配vh、vw、vmin、vmax 知多少?

链接:https://www.javascriptc.com/556.html

原文链接:https://github.com/chokcoco/iCSS/issues/15

« 【趣聊Css-13】不可思议的颜色混合模式 mix-blend-mode(上)
【趣聊Css-11】奇妙的-webkit-background-clip: text 属性»
Flutter 中文教程资源

相关推荐

QR code