职责编辑已经过原作 Ahmad Shadeed 许可译者
我们看见这个副标题可能会误以为小光呢又写错字了 ，积极响应式度结构设计？你深入细致的吗？即使“积极响应式Web结构设计”通常而言是在数个长度和电子设备体积上检查和应用程序。他们一般透过增大长度修正水准路径的积极响应潜能，但我极少看见透过增大应用程序度来展开横向积极响应的考量。这时，螺科岩么内心深处可能有些许的市场波动，并暗含许些疑点：他们须要减少应用程序的度吗？是的，他们始终深入探讨呵呵。
当他们在结构设计中文网站的这时候，不倚赖前述统计数据展开假定是不太好的，水准和横向试验的职责也是十分关键。
为何要试验度？
对两个结构雕塑家而言，两个片面的假定是烧掉两个中文网站结构设计的关键不利因素众所周知。比如，假定采用者的确是透过采用萤幕的全宽和GT5316SB0下载中文网站是不恰当的。恰好相反，他们须要考量最坏的情形。
螺科岩么，看知道了吗。事实上是，绝非大部份采用者都依照他们所期许那样采用应用程序。我辨认出减少应用程序度时中文网站看上去很差劲。
应用程序 DevTools
修正应用程序的大小不一(横向路径)并不是发生改变视口度的惟一方式。当他们关上应用程序DevTools，它也会挤占应用程序的度。
上图中的箭头区域代表当前视口的度，对较小的笔记本电脑萤幕，他们只会看见一小部分页面。
真正的问题是：当视口度较小时，他们可以增强采用者体验吗？是的，有可能，他们来一起看看。
CSS 中的横向思考
，在开发中， UI 提供了特定组件在不同视口长度上的变化。但，不同的视口度又如何呢？
在上图中，他们有两个基于视区度展开修正的导航菜单。。如果视口大小不一很小(比如，iPhone 5)，导航项将显示为两个两列网格。这种思维方式通常而言会被舍弃，或者直到有人说要做才会这么去优化。
CSS 中可以透过采用两种不同方式来实现上面的需求：
Vertical media queriesViewport unitsVertical 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 queriesCSS 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>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; } }减少间距-导航
如果他们中文网站有侧边栏或侧边栏，当视口度很小时，他们可以减少一些导航项之间的横向间距，这也会增强整体结构设计。
模态框
他们知道，模态框至少应该水准居中。但，有时他们还须要横向居中，我们通常会采用下面的方案：
.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。min-height是即使内容很短也要保持模态看上去好，max-height是采用特定值限制其度，而不是添加固定的度。
总结
在结构设计一种体验时，最好从长度和度的角度来考量。横向地修正应用程序的大小不一可能有点奇怪，但它也有它的优势。在职责编辑中，他们讨论了横向试验的关键性，以及我们如何展开横向试验，最后，提出了一些示例和用例，希望对螺科岩们有用。
原文：
https://hadeed.com/article/responsive-design/
