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

本文已经过原作者 Ahmad Shadeed 授权翻译

大家看到这个标题可能会以为小智是不是又写错别字了 😂，响应式高度设计?你认真的吗?因为“响应式Web设计”通常是在多个宽度和设备尺寸上检查浏览器。我们一般通过减小宽度调整水平方向的响应能力，但是我很少看到通过减小浏览器高度来进行垂直响应的考虑。此时，智米么内心可能有一丝的波动，并带有许些疑问：我们需要降低浏览器的高度吗?是的，我们一直探讨一下。

当我们在设计网站的时候，不依赖实际数据进行假设是不好的，水平和垂直测试的责任也是非常重要。

为什么要测试高度?

对于一个设计师来说，一个不合理的假设是毁掉一个网站设计的重要因素之一。例如，假设用户肯定是通过使用屏幕的全宽和全高浏览网站是不正确的。相反，我们需要考虑最坏的情况。

智米么，看明白了吗。现实情况是，并非所有用户都按照我们所期望一样使用浏览器。我发现降低浏览器高度时网站看起来很糟糕。

浏览器 DevTools

调整浏览器的大小(垂直方向)并不是改变视口高度的唯一方法。当我们打开浏览器DevTools，它也会占用浏览器的高度。

上图中的箭头区域代表当前视口的高度，对于较小的笔记本电脑屏幕，我们只会看到一小部分网页。

真正的问题是：当视口高度较小时，我们可以增强用户体验吗?是的，有可能，我们来一起看看。

CSS 中的垂直思考

作为设计师和开发人员，我们中的一些人只关注设计的宽度变化，而忽略了视口高度变化。例如，在开发中， UI 提供了特定组件在不同视口宽度上的变化。但是，不同的视口高度又如何呢?

在上图中，我们有一个基于视区高度进行调整的导航菜单。。如果视口大小很小(比如，iPhone 5)，导航项将显示为一个两列网格。这种思维方式通常会被舍弃，或者直到有人说要做才会这么去优化。

CSS 中可以通过使用两种不同方式来实现上面的需求：

• Vertical media queries
• Viewport units

Vertical Media Queries智米么肯定知识在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。

<div class="hero"> 
  <div class="hero__wrapper"> 
    <div class="hero__content"><!-- content --></div> 
    <img class="hero__thumb" src="figure.png" alt="" /> 
  </div> 
</div> 

本文转载自网络，原文链接：https://mp.weixin.qq.com/s/eVvH-dBS2ubTivc5hxGYdg
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！

上一篇：树 | 突然间，看了这篇文章，树我懂了！ 下一篇：没有了