<p class="zw">当设计师与工程师们在第一次处理响应式设计时，一个最常见的情况，就是要一起找出特定设备的精确断点宽度。首先考虑的是大部分型号的iPhone，然后是iPad，最后是其他更小的设备。</p> <p class="zw">我们万万不可被老板或者客户带到沟里，比如他们要求你为网站或者APP开发一个“iPhone或者iPad版本”。随着设备和屏幕尺寸的几何级增长，这种方法是十分不可取的，也非常低效。</p> <p class="zw">定义响应式断点通常是为了适应内容，而不是适应设备尺寸，这个概念越来越被普遍接受。事实上，用这样的原则去选择响应断点并不总是简单的，它要求我们在实施设计方案的时候，要用不同的方式切入。但是最终，通过这样的努力，它会让我们的设计更加具有适应性。</p> <p class="zw">让我们来看下面这个例子，它将要使用CSS的多列布局属性，来为<code>div</code>做分栏布局。你将能很快从本例中学会如何实现它。</p> <p class="zw">如果我们使用只兼容特定设备的方法，也许会根据设备的宽度来决定设置几栏，例如，iPhone 6s在横屏状态下：</p> <pre class="代码无行号"><code>@media only screen and (max-device-width : 41.6875rem) { section { column-count : 2; } }</code></pre> <p class="zw">对比这种不正确的方式，我们更应该依据自己的排版知识，通过衡量内容的可读性来设置分栏。如果每一行的字符太少，阅读体验会很弱；反之阅读起来会有困难。</p> <p class="图"><img alt="1004.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/68.jpg"></p> <p class="图题">当我们在部署样式，为页面设置响应式断点的时候，其实并没有什么一成不变的捷径，我们要考虑的是如何让内容更具有意义。</p> <p class="zw">基于对字号的认识，我们能够计算出一行文字大概有多少个字母或者中文字符，然后据此添加相应的分栏，完成一个提升阅读体验的布局。</p> <pre class="代码无行号"><code>@media only screen and (min-width: 48rem) { section { column-count : 2; } } @media only screen and (min-width: 76.250rem) { section { column-count : 3; } }</code></pre> <p class="zw">我把过往基于设备类型的断点方式，改变成基于内容的媒体查询，它们之间的差异大得超乎了我的想象。仔细思考了我过往的所有设计，除了内容本身，还有很多持续多年的旧做法，也因为这种改变而被我扔进了垃圾桶。这也驱动我去使用一种过渡的方法，一种包括了大体的、主要的兼容范围，又能兼顾基本内容展示和调整的断点方式。</p>
