别再说 CSS 只有 4 个视口单位了，新增了 20 个！
2024-02-27 02:08:01
CSS 视口单位的新世界：控制你的元素，掌握你的设计
在当今响应式网络的时代，控制元素在各种设备和屏幕尺寸上呈现的方式至关重要。CSS 视口单位的诞生极大地丰富了我们的工具箱，让我们能够以前所未有的精度和灵活性调整元素。
视口单位的演变
最初，我们只有少数可怜的视口单位，如 vw（视口宽度）和 vh（视口高度），它们的功能非常有限。随着技术的发展，视口单位家族不断壮大，如今已经扩展到令人惊叹的 24 个成员！这些新增的单位极大地丰富了 CSS 的表现力，让我们能够更精细地控制元素的布局。
20 个新增的视口单位
这 20 个新增的视口单位涵盖了广泛的用途，从控制元素大小到调整间距和位置：
- vmin 和 vmax： 分别代表视口较小尺寸和较大尺寸的单位。
- vi 和 vb： 分别代表视口较小尺寸和较大尺寸的相对单位。
- ic、cb、lb、rb、sb、eb、ib、ob、wb、hb： 这些单位将视口分成 10 等份。
- dvh、dh、dvw、ch： dvh 代表视口高度的十分之一，dh 代表视口高度的一半，dvw 代表视口宽度的十分之一，ch 代表字符高度。
- iw 和 ih： 分别代表视口宽度和视口高度。
使用新增视口单位
这些新增的单位非常易于使用。与 vw 和 vh 类似，它们可以用于指定长度、宽度、边距和内边距。例如：
/* 设置一个根据视口较小尺寸变化的字体大小 */
body {
font-size: 1vmin;
}
/* 设置一个根据视口高度十分之一变化的边框厚度 */
.box {
border: 1dvh solid black;
}
/* 设置一个根据视口宽度变化的容器宽度 */
.container {
width: 100iw;
}
优缺点权衡
任何新特性都有其优点和缺点。新增的视口单位也不例外：
优点：
- 精细控制： 这些单位提供了更精细的控制，允许我们以更高精度调整元素的尺寸和位置。
- 跨设备兼容性： 这些单位在所有设备上都受支持，确保我们的设计在不同屏幕尺寸上都能保持一致性。
- 响应式设计： 这些单位非常适合响应式设计，使我们的元素能够根据视口大小自动调整大小。
缺点：
- 浏览器支持： 虽然这些单位在现代浏览器中都受支持，但在较旧的浏览器中可能不支持。
- 学习曲线： 这些新增的单位可能需要一些时间来学习和掌握。
- 潜在性能问题： 过度使用这些单位可能会导致性能问题。
明智使用新增视口单位
通过明智地使用这些新增的视口单位，我们可以创建出更加动态和响应的网站和应用程序。这些单位为我们提供了前所未有的控制能力，可以精细地调整元素的布局，确保它们在所有设备上都呈现出最佳效果。
常见问题解答
- 这些新增的视口单位如何改善我的设计？
这些单位提供了更精细的控制，使你能够以更高精度调整元素的尺寸和位置。它们还提高了跨设备的兼容性，确保你的设计在不同屏幕尺寸上都能保持一致性。
- 使用这些单位会影响性能吗？
过度使用这些单位可能会导致性能问题。因此，请明智地使用它们，并在可能的情况下优先使用其他更轻量的选择。
- 我应该使用哪些单位来控制元素的宽度？
取决于你要实现的效果。vw、iw、dvw 和 vmin 都是控制元素宽度的常用单位。
- 这些单位是否支持所有浏览器？
大多数现代浏览器都支持这些单位，但在较旧的浏览器中可能不支持。务必检查浏览器的兼容性，以确保你的设计在所有目标设备上都能正常工作。
- 学习这些单位是否困难？
学习这些单位的语法很简单。但是，精通它们的用法可能需要一些练习和实验。
