<p class="zw">响应式设计经常迫切需要对排版的完美控制。其中最有效的一个办法是通过调整文本大小，以及行高这些与宽度有关的特性，来提升可读性。</p> <p class="图"><img alt="1010.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/74.jpg"></p> <p class="图题">对于我们的WWF案例网站，当屏幕宽度增加时，我们也适时地增加了段落和其他文字部分的行高，这里显示了在iPhone横竖屏以及iPad上的显示状态。</p> <p class="zw">作为一个普遍的经验法则，行高应该随着尺寸增长而变大。这样有利于我们的眼睛，去分辨每行的开始和结束位置。媒体查询允许我们利用视窗宽度或者设备宽度以及相关的CSS选择器，精确地控制行高。在下例中，我们将会把最小的屏幕和最窄的列的<code>line-height</code>设置为<code>1.4</code>。</p> <pre class="代码无行号"><code>p { line-height : 1.4; }</code></pre> <p class="zw">随着屏幕和列越来越宽，行高应该随之变大。而这个增长数值依赖于我们选择字体的字号大小。我们设计行高将会以渐进方式逐渐增加，在最小宽度<code>48rem</code>时设置行高值为<code>1.5</code>。</p> <pre class="代码无行号"><code>@media (min-width: 48rem) { p { line-height : 1.5; } }</code></pre> <p class="zw">最终，我们会在最小视窗宽度为<code>64rem</code>时候，设置行高值为<code>1.6</code>。</p> <pre class="代码无行号"><code>@media (min-width: 64rem) { p { line-height : 1.6; } }</code></pre> <p class="zw">随着宽度的不断增加，行高值也会越来越大。而宽度越窄，行高也会越紧凑，这样不仅提升了可读性，也提升了设计排版方面的体验。</p> </blockquote>
