<p class="zw">截至目前，我们讨论的媒体查询，似乎都是以宽度作为最重要的影响因素的，但是设备的高度，也在响应式布局里扮演这非常重要的角色。我们不能总是假设每个用户使用足够高和足够舒服的屏幕。</p> <p class="zw">苹果出品的11寸的MacBook Air，是一款非常棒的便携式电脑，但是它的屏幕高度比较低，很多设计在屏幕中的显示效果，看起来很笨拙。幸运的是，有几组媒体查询可以帮助我们来改善设计：<code>height</code>、<code>min-height</code>和 <code>max-height</code>；<code>device-height</code>、<code>min-device-height</code>和<code>max-device-height</code>。</p> <p class="zw">对于MacBook Air或者类似这样的屏幕比较矮小的设备，我们可以减少垂直间距或元素，比如减小行高、头尾的banner以及导航的内边距值。</p> <pre class="代码无行号"><code>p { line-height : 1.5; } [role="banner"], [role="navigation"] { margin-top : 1.5rem; } @media (device-height: 56.25rem) { p { line-height : 1.4; } [role="banner"], [role="navigation"] { margin-top : 1.3rem; } }</code></pre> <p class="zw">这样一个微小的调整，却能为用户体验带去极大的改善。</p>
