css.hero{height:100vh;}.hero__thumb{flex:00550px;width:550px;}针对此类问题，这里有几种解决方法：和高度）而不是只设置宽度，缺少高度会继续出现这个问题。高度：仅当视口高度大于700像素时为100vh（媒体查询值可能因上下文而异）。我们可以将两者结合起来以获得更强大的解决方案。.hero__thumb{width:400px;height:300px;object-fit:contain;/*Toavoidcompressingtheimage*/}@media(min-height:700px){.hero{height:100vh;}好了，现在我们同意使用垂直媒体查询更好。但是，使用100vh是有风险的，因为即使我们限制插图的大小，我们也可能无法对文本内容做同样的事情。如果文本内容变长，同样的问题又会出现，见下图：为了解决这个问题，我们可以使用min-height代替height。这样，如果内容变长，高度将扩大而不是重叠。@media(min-height:700px){.hero{min-height:100vh;}}FixedHeader在滚动时固定标题不是坏事，但是，我们只想确保垂直空间足够好Fixthe标题，这样体验会更好。这是一个关于风景的网站。这里我们可以看到，当高度太小的时候，固定高度会整体占用很大的空间。这对用户来说真的很重要吗？在大多数情况下这并不重要，因为普通用户不会缩小来查看这样的网站。目前，如果我们要优化，也是可以的。思路是通过垂直媒体查询判断高度小于一定高度时，将固定定位改为静态定位。@media(min-height:700px){.site-header{/*position:fixedorposition:sticky*/}}隐藏不太重要的元素我在Twitter.com的导航栏上注意到了这种模式。这个想法是将垂直媒体查询与Priority+模式结合起来。当视口高度调整大小时，不太重要的元素（书签和列表）被删除并附加到“更多”菜单，这是垂直媒体查询的一个很好的用例。.nav__item--secondary{display:none;}@media(min-height:700px){.nav__item--secondary{display:block;}}减少间距-nav如果我们的网站有侧边栏或者侧边栏，当视口高度时小，我们可以减少一些导航项之间的垂直间距，这也增强了整体设计。.nav__item{padding-top:4px;padding-bottom:4px;}@media(min-height:700px){.nav__item{padding-top:10px;padding-bottom:10px;}}我们知道的模态框，mod状态盒子至少应该水平居中。但是，有时我们需要垂直居中。我们一般采用如下方案：.modal__body{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:500px;}但是，当内容变长，模式垂直填充屏幕，用户将无法滚动它。这种情况有几个原因：模态框没有高度，模态垂直居中（这样会导致问题更快出现）下面是固定的css:.modal__body{position:absolute;left:50%;top:3rem;transform:translateX(-50%);width:500px;min-height:200px;max-height:500px;overflow-y:auto;}@media(min-height:700px){.modal__body{top:50%;transform:translate(-50%,-50%);}}请注意，我使用了最小高度和最大高度。min-height是为了让模态即使内容很短也能好看，max-height是用特定的值来限制它的高度，而不是添加一个固定的高度。总结在设计体验时，最好考虑宽度和高度。垂直调整浏览器大小可能有点奇怪，但它有其优点。在这篇文章中，我们讨论了垂直测试的重要性，以及我们是如何做的，最后提出了一些示例和用例，希望对智米有用。作者：AhmadShadeed译者：FrontendXiaozhi来源：ishadeed原文：https://hadeed.com/article/responsive-design/本文转载自微信公众号「大运世界」，可关注以下二维码代码。转载请联系大千世界公众号。