调整浏览器的大小(垂直方向)并不是改变视口高度的唯一方法。当我们打开浏览器DevTools，它也会占用浏览器的高度。
上图中的箭头区域代表当前视口的高度，对于较小的笔记本电脑屏幕，我们只会看到一小部分网页。
真正的问题是：当视口高度较小时，我们可以增强用户体验吗？ 是的，有可能，我们来一起看看。
作为设计师和开发人员，我们中的一些人只关注设计的宽度变化，而忽略了视口高度变化。例如，在开发中， UI 提供了特定组件在不同视口宽度上的变化。 但是，不同的视口高度又如何呢？
在上图中，我们有一个基于视区高度进行调整的导航菜单。。如果视口大小很小(比如，iPhone 5)，导航项将显示为一个两列网格。这种思维方式通常会被舍弃，或者直到有人说要做才会这么去优化。
CSS 中可以通过使用两种不同方式来实现上面的需求：
-
Vertical media queries
-
Viewport units
智米么肯定知识在CSS中使用宽度媒体查询。
@media (min-width: 700px) {
.element {
/* do something… */
}
}
较少使用的是垂直媒体查询，它检查视口高度。
@media (min-height: 500px) {
.element {
/* do something… */
}
}
/* or */
@media (orientation: landscape) {
.element {
/* do something… */
}
}
使用视口单位可以帮助为用户提供更好的体验。 例如，根据视口高度控制元素之间的垂直间距。
.hero__title {
margin-bottom: calc(10px + 5vh);
}
如上所示，大比较大的屏幕（例如iMac 27英寸），下边距就会变的很大。我们有两种方式来解决边距过大的问题。
-
Media queries
-
CSS comparison 函数
第一种方式（媒体查询）受到更多支持。 如果屏幕很大，我们需要为下边距设置最大值。
@media (min-width: 2200px) {
.hero__title {
margin-bottom: 40px;
}
}
另一种方法是使用CSS clamp()比较函数，clamp() 函数的作用是返回一个区间范围的值。
.hero__title {
margin-bottom: clamp(10px, 5vh, 40px);
}
在此示例中，有一个section 区域，其中有标题和插图的部分, section 高度等于视口高度的100％。
一切看起来都很好，直到视口高度变小。section 的高度将不足以容纳插图和文本内容。因此，它将与页面上的其他部分重叠。
注意插图与下面的部分如何重叠。 发生这种情况是因为有足够的垂直空间。 看一下HTML和CSS。
css
.hero {
height: 100vh;
}
.hero__thumb {
flex: 0 0 550px;
width: 550px;
}
下面是解决此类问题几种解决方案：
-
为插图设置固定大小（宽度和高度），而不是仅设置宽度，缺乏高度将会继续存在这个问题。
-
仅当视口高度大于
700px时才为height: 100vh（媒体查询值可能会根据上下文而有所不同）。
我们可以将两者结合起来，获得更强大的解决方案。
.hero__thumb {
width: 400px;
height: 300px;
object-fit: contain; /* To avoid compressing the image */
}
@media (min-height: 700px) {
.hero {
height: 100vh;
}
好的，现在我们同意使用垂直媒体查询更好。然而，使用100vh是有风险的，因为即使我们限制了插图的大小，也可能无法对文本内容执行相同的操作。如果文本内容变长，同样的问题会再次发生，参见下图：
小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
何学起的朋友，同时减轻大家的负担。**
[外链图片转存中…(img-uhm8bqyG-1710921702324)]
[外链图片转存中…(img-FfTcnTU7-1710921702325)]
[外链图片转存中…(img-NhAQzTbI-1710921702325)]
[外链图片转存中…(img-1bJGuO5j-1710921702325)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-RfYkGX1T-1710921702325)]
扫一扫
3115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
