CSS中的视口单位

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

过去几年，响应式设计在网页设计领域已成为热门话题。各种框架可以帮助我们更快地构建响应式设计。其中一种方法是使用视口百分比单位，简称“视口单位”，这是一个 CSS3 属性，可以帮助你自动化响应式设计中的某些方面。

使用视口单位，特定元素的大小可以适应浏览器屏幕尺寸的变化。

您可以使用以下设置代替像素、em 或百分比值：

• vw：浏览器宽度的百分比
• vh：浏览器高度的百分比
• vmin：浏览器高度或宽度的最小百分比，取两者中的最小值。
• vmax：浏览器高度或宽度的最大百分比，取两者中的最小值。

您可以在任何接受像素 (px) 值的 CSS 属性中使用这些单位，例如宽度、高度、边距、字体大小等。当窗口大小调整或设备旋转时，浏览器会重新计算这些单位。

让我们来概览一下它的优势：

页面全高

传统上，我们使用 `vh` 属性height:100%来获取容器的完整高度以适应屏幕。现在，我们可以用更少的代码实现同样的效果vh。这有助于将图像缩放到用户屏幕的高度。在 Codepen 中查看演示。要查看区别，请将 Codepen 演示中的 `100vh` 替换为 `100%`。

.image-container {
  height: 100vh;
  width: auto;
}

保持元素长度小于屏幕长度

如果您想显式地控制元素相对于视口大小的高度，使其始终保持在可视范围内，那么这种技巧会很有用。在 CodePen 中查看演示。

缩放文本（响应式文本）

使用这种技术，开发者在调整字体大小时拥有极大的灵活性，并且字体大小能够随视口大小动态缩放。为了便于练习，可以在根元素中设置一个基础字体大小，然后使用视口单位来调整根元素的字体大小，并以此为基础进行缩放。

媒体查询与文本完美结合vw units，确保在各种屏幕尺寸下都能获得良好的可读性。在 CodePen 上查看演示。尝试更改基础字体大小（HTML）值。

html {
  font-size: 20px;
}

h1 {
  font-size: calc(100% + 5vw); 
}

挣脱容器

视口单位允许我们在包含元素之外进行内容分割。在内容管理系统 (CMS) 难以或无法修改 HTML 模板标记的情况下，使用视口单位可以实现所需的效果，而无需考虑标记本身。虽然这种方法并非在所有情况下都有效，但在某些情况下却非常实用。
在 CodePen 中查看演示。

.container {
  max-width: 1024px;
  margin: 0 auto;
}

.breakout { 
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100vw; 
}

如您所见，所有主流浏览器都对视口单位提供了完善的支持。不过，您仍然可能会遇到一些问题。在设计中采用新技术之前，最好先检查一下caniuse 是否兼容。

结论

看到这里，我希望你已经爱上了视口单位。就我个人而言，我认为视口单位完美适配各种设备。我建议你在项目中尝试一下，探索并享受它带来的乐趣！

希望这篇博客对您有所帮助。欢迎分享您的想法和意见，如果您有任何问题或疑问，也请留言。

继续破解！加油！