本教程将引导您了解如何使用CSS垂直断点来优化网页在不同屏幕高度下的表现。我们将探讨在短视口上调整间距、字体大小及导航尺寸的方法，以及如何在空间允许的情况下固定页眉或页脚。
websorm 快速断点
欢迎来到另一个Envato Tuts +截屏教程！ 在本视频中，我将向您简要介绍如何使用CSS垂直断点。
断点是响应式Web设计的代名词。 它们是您选择更改设计布局的点。 例如，768px是常用的视口宽度，在该宽度以下，您可能要为移动设备安排布局，在该宽度上，您可能会在桌面方面考虑更多。
但是，断点不仅适用于视口宽度，还适用于水平方向。 它们可能由于多种不同的原因而生效。 在本教程中，我们将研究垂直断点，这些断点是相对于视口的高度而应用的。 我们将它们与CSS媒体查询中的min-height和max-height属性一起使用。 让我们更深入地看一下。
在此视频中，我们看以下情况：
- 在短视口上更改间距和字体大小。
- 在短视口上调整移动导航的大小。
- 仅在有足够空间时才固定页眉或页脚。
- 调整短视口的全屏部分。
确保下载源文件以进行后续操作。
进一步阅读
翻译自: https://webdesign.tutsplus.com/tutorials/a-quick-guide-to-vertical-break-points--cms-28754
websorm 快速断点
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
