<p class="zw">即使我们遵从基于内容的方法选择响应式断点，依然会在实际工作中，碰到在一些主要断点处，出现较大样式调整的情况。使用flexbox布局时，我们也许会把导航从页脚调整到页头；我们也许在屏幕宽度允许的情况下，给页面增加一个侧栏；又或者会把内容的分栏从两列调整成三列。但是，不是每一个调整都会在主要断点处得到体现。</p> <p class="zw">也许我们喜欢把一个无序列表拆成两列展开，以便最大化地利用空间；也许我们需要把一组按钮的间距做下调整，以防止排成一行的按钮变成两行；有时，我们需要调整元素的样式，让它们看起来，与我们早前选择的主要断点样式有很大改变。这其实都不是问题 ，关注细节本就是响应式设计的精髓所在。</p> <p class="图"><img alt="1006.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/70.jpg" style="width: 1365px" width="1365"></p> <p class="图题">元素的排列和布局在大的断点触发时，发生了较大变化，但是在少数断点的细微处的细节处理，让一个平庸的设计变得非常独特。</p> <p class="zw">直到屏幕宽度达到<code>48rem</code>时，才会触发我们的第一个主要断点样式，即使这样，也要在这个条件成立前，保证我们设置的按钮组展示没问题。</p> <pre class="代码无行号"><code>/* Minor breakpoint */ @media (min-width: 30rem) { .btn { padding : 1rem 1rem .75rem; } } /* Major breakpoint */ @media (min-width: 48rem) { .btn { padding : 1.25rem 1.25rem 1rem; } }</code></pre> <p class="zw">Jeremy Keith有一个描述这些枯燥的技术名词的诀窍 ，他把这些少数断点，称为微调点。</p> <p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“把它们叫做断点非常古怪，布局并没有被它们打断。这些媒体查询语句，只不过是稍稍调整了布局。它们不是断点，而是微调点。”</span></p> <p class="zw">除了像黑莓手机这种正方形屏幕设备外，大部分我知道的智能手机或者平板电脑，都具备两个方向：竖屏方向，即屏幕的高度大于宽度；横屏方向，与竖屏相反。</p>
