css .hero{height:100vh;}.hero__thumb{fl。响应式网页中的高度设计，你认真的吗？( 二 )。" />

江苏龙网

  1. 主页 > 生活百科 > >

响应式网页中的高度设计，你认真的吗？( 二 )

响应式网页

<div class="hero">  <div class="hero__wrApper">    <div class="hero__content"><!-- content --></div>    <img class="hero__thumb" src=https://www.isolves.com/it/wlyx/wzjs/2020-12-24/"figure.png" />

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是有风险的，因为即使我们限制了插图的大小，也可能无法对文本内容执行相同的操作 。如果文本内容变长，同样的问题会再次发生，参见下图：
响应式网页中的高度设计，你认真的吗？

文章插图
 
为了解决这个问题，我们可以使用min-height而不是height 。这样，如果内容变长，高度将扩大并且不会重叠 。
@media (min-height: 700px) {  .hero {    min-height: 100vh;  }}固定头部在滚动时固定标题并不是一件坏事，但是，我们要确保只有在垂直空间足够好的情况下才固定标题，这样体验才会好 。
响应式网页中的高度设计，你认真的吗？

文章插图
 
这是一个关于风景类的网站，这里我们可以看到，当高度过小的时候，这个固定高度整体就会占用很大的空间 。这个对用户真的重要吗?大多数情况是不重要的，因为一般用户不会缩小成这样去看一个网站 。当前，如果我们要优化也是可以就是，思路就是通过垂直媒体查询，判断高度小于某个高度的时候就将固定定位改成静态定位 。
@media (min-height: 700px) {  .site-header {    /* position: fixed or position: sticky */  }}隐藏不太重要的元素我在Twitter.com的导航栏上注意到了这个模式 。其思想是将垂直媒体查询和Priority+模式结合起来 。
响应式网页中的高度设计，你认真的吗？

文章插图
 
调整视口高度的大小时，次重要的元素（书签和列表）将被删除并附加到“更多”菜单中，这是垂直媒体查询的一个很好的用例 。
.nav__item--secondary {  display: none;}@media (min-height: 700px) {  .nav__item--secondary {    display: block;  }}减少间距-导航如果我们网站有侧边栏或侧边栏，当视口高度很小时，我们可以减少一些导航项之间的垂直间距，这也会增强整体设计 。
响应式网页中的高度设计，你认真的吗？

文章插图
 
.nav__item {  padding-top: 4px;  padding-bottom: 4px;}@media (min-height: 700px) {  .nav__item {    padding-top: 10px;    padding-bottom: 10px;  }}模态框我们知道，模态框至少应该水平居中 。但是，有时我们还需要垂直居中，我们一般会使用下面的方案：
.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%);  }}


推荐阅读


上一篇：Linux两种处理模式reactor模式proactor模式

下一篇：这些 MySQL 调优配置，你都知道吗？