截至目前，我们讨论的媒体查询，似乎都是以宽度作为最重要的影响因素的，但是设备的高度，也在响应式布局里扮演这非常重要的角色。我们不能总是假设每个用户使用足够高和足够舒服的屏幕。

苹果出品的11寸的MacBook Air，是一款非常棒的便携式电脑，但是它的屏幕高度比较低，很多设计在屏幕中的显示效果，看起来很笨拙。幸运的是，有几组媒体查询可以帮助我们来改善设计：height、min-height和 max-height；device-height、min-device-height和max-device-height。

对于MacBook Air或者类似这样的屏幕比较矮小的设备，我们可以减少垂直间距或元素，比如减小行高、头尾的banner以及导航的内边距值。

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; } 
}

这样一个微小的调整，却能为用户体验带去极大的改善。