大型、小型和动态视窗

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 提供适用于您旅程每个阶段的云产品。 立即开始使用 200 美元的免费积分!

我们拥有视窗单位(例如 vwvhvminvmax),它们大多都很棒。 始终拥有一个相对于整个屏幕的单位很酷。 但当你问人们他们希望在 CSS 中修复什么时,视窗单位 总是出现在列表中。 问题在于人们使用它们来执行诸如将重要按钮放置在移动设备屏幕底部的操作。 如果操作不当,可能会损失 800 万美元

什么“错误”? 好吧,假设 100vh 是视窗中可见/可用区域。 什么? 这不是这些单位的重点吗? 有些技巧,例如 这个这个,但这就是人们不高兴的原因。 这些都不直观,而且经常会发生重大错误。 尽管 Safari 15 将会使这 变得稍微好一些,但我认为它的处理方式仍然不怎么直观。

Bramus Van Damme 指出 规范 现在包含了一些新值

  • “大型视窗”:lvh / lvw / lvmin / lvmax
  • “小型视窗”:svh / svw / svmin / svmax
  • “小熊视窗”
  • “动态视窗”:dvh / dvw / dvmin / dvmax

在我看来,动态视窗是有用的,因为它们很直观:代表当前可用空间的单位,无论大小。

动态视窗是指在 *动态考虑任何 UA 界面* 的情况下进行调整的视窗。 它会自动调整自身以响应 UA 界面元素的显示或隐藏:该值将在 100vh(最大值)和 100svh(最小值)的限制范围内。

Bramus Van Damme“大型、小型和动态视窗”

直接链接 →