你可以轻易找到许多如何设置响应式设计响应点的攻略，但是这些过时的设计方法都是以主流屏幕尺寸为依据的，效果并不理想。其实并没有“主流”屏幕尺寸这一概念。另外一个主流的方法是当布局被打破时设置响应点。这个方法听起来好一些。但是仍有疑问，我们怎么判断是否布局被打破了呢?其中一个合理回答是依照经典可读性理论定义响应点。

　　名人的看法

　　Robert Bringhurst认为，单列页面里的内容被设置为普通有衬线字体和普通字体大小时，排列45至75个字符长度为最佳。Josef Müller-Brockmann认为，一行如果能容纳10个单词那么这栏就很容易阅读。有许多原因会影响实际的字符数或单词数，但这是一种基本理论。如果你从小屏幕开始，然后你逐渐增大，主要内容的宽度也可能会变得比75个字符或者10个单词更宽，一些改变就会发生了。简单的说，这些就是你的响应点。

　　多种因素决定理想尺寸

　　许多因素决定了理想尺寸的大小。比如，德语的长度比英语长，那就需要更宽的位置了。你理解对了：对于需要多种语言的国际网站你必须有不同的栅格。字体、字号、背景对比度、行距、字间距、文字类型等等这些因素都会影响一行文字的长度。

　　设计师的自我见识和经验对于尺寸的判断影响很大。你可能很容易就判断出75到90个字符的长度是最理想的。但是我不是设计师，也不是排版家，所以我只能根据书上的理论知识来判断。当然了，知道自己在干啥的这类人，完全可以自己构想一下所谓理论。

　　我制作了这个国际尺寸滑动器，让你了解一小节是多宽。这个小工具看起来只是在变化语音和字体，但是你会发现这两个变化值分别能带来极端的效果。只是拿德语或波兰语同英语比较，或者更详细点，德语设置为Verdana字体与英语设置为Georgia比较。差异十分巨大：10个设为Verdana的德语单词宽38.5ems，但是10个设置为Georgia的英语单词才宽22ems。在许多默认浏览器的设置里，这将会是616px对352px的差距。你可以看到两个简单的因素对栅格的巨大影响。

　　合理的尺寸对于一篇文章来说十分重要。我知道网络也并非只有文章。你也可以很顺畅的使用只有很少文字说明的网络应用。但是确定响应点的时候首先考虑尺寸也是非常好的做法。

　　实例说明

　　因为只是一个例子，所以我用的是一个简单的博文。它是一篇结构清晰但内容简单的文章，包含一些常见的语义元素。这些元素不足以确定响应点，但是会给我们一些帮助。排版是一个合理的出发点。我忽略了头部和logo，只先集中在内容上。

　　当然，如果你在浏览器里打开这篇没有样式的文章，会觉得它非常丑。它没有任何样式除了浏览器默认自带的那些样式。文章和浏览器窗口一样宽，在桌面浏览器上看时觉得太宽了点。这就像大家在IE6上看到的网页的感觉一样——很容易看懂但是样式糟糕。

　　添加一些基本的排版样式和max-width属性之后，这篇文章马上看起来好多了。这个页面现在可以当作定义不同响应式栅格的出发点了。这个单列排版在小屏上可能需要调整，在大屏上时需要增加一些列，不管是为了让排版更美观，还是展示更多信息，比如导航或者侧边栏。

　　合理响应点

　　我在高中毕业前从来没用心学过数学，所以我使用了一个很简单的栅格。聪明人可以借用相同的思想但是使用更复杂的栅格系统。这章主要是定义响应点;所以怎么设置全由你自己决定。

　　小屏

　　我先从小屏幕开始。Oliver Reichenstein定理，是我非常喜欢的一个理论，它的字体设置不以屏幕尺寸为依据，它依据的是人眼和设备之间的距离。我们倾向于把手机拿的比电脑更靠近头一点，所以需要小一点的字体。另外一个Robert Bringhurst定理，就像上面阐述的，理想尺寸不应该小于45个字符。在我们的例子中，可以使用16px字号的Georgia字体作为默认字体，这会让字看起来稍微小点。两种理论都很好，它们都告诉我们在小屏上要减小字号。所以，我们在小屏手机上需要写的代码如下：

　　这说明当尺寸小于45个字符时，使用小字号。我也减少了页面两边的内边距使主体内容有更多空间显示。看看下面的例子。

　　大屏

　　有时单列就足够了。内容主导型的网站比如博客，单列是最理想的布局。但是多列布局在很多情形下在大屏上显示效果会很好。有时你可能想显示导航，或者一些有用的小插件。你肯定会想把这些东西放在内容区旁边。

　　我们也可以自己做一些事情。如果正好这里有空间可以额外放一个栏目，我们可以自己设计我们的文章布局。我在左边增加一个宽度为33%的栏目，标题和文章的第一段占满这个区域。其他元素如引文和图片也能填在这个区域。

　　这里的代码就有点复杂了。这么写结构不是唯一的或者说最主流的方法。但是我是这么做的。

　　当屏幕宽度超过34ems时(内容宽30ems，外边距宽4ems)，页面最大宽度为51ems：34+(34÷2)。现在文章占整个宽度的2/3，左边新栏的宽度是1/3。在它右边的h1和p元素内容应该设置一个负的外边距值，值为内容宽度的50%。这就是为什么我一直怪自己没有好好学习数学了!

　　更大屏

　　我们可以加个第三栏，第四栏，第五栏。这取决于我们的内容。我们可以利用相应空间展示一些图片和相关内容。这完全取决于你自己的设计。在我的示例中，我们可以把脚注放在内容的右边。别笑话我了~我又不是视觉设计师，就这么排版吧。看看代码吧：

　　现在文章宽50%，左右两边的外边距宽25%。边脚注向右偏移了50%的距离。脚注宽为50%减去2em，看起来会更好些。p和h1标签的代码不变。注意calc这个属性不是所有浏览器都支持，所以我们得留点后路。所以代码如下：

　　我也知道不是所有前缀都有用，但是我建议全部写上。如果你不想这么做，建议你记住哪个浏览器支持什么CSS属性，是否需要带前缀。如果能正确理解层级关系，是非常有用的。当然，它得排的好看。我能清楚看到我的样式表是怎么生成出漂亮的样式的。

　　现在我们就有一个响应式设计的网站了，基于文字大小和屏幕尺寸的。响应点是基于逻辑运算而不是随机因素如当下流行的设备屏幕尺寸等。这个设计对于未来的修改和浏览器用户都有好处。因为所有元素大小都是基于文字大小来设置的，完全能迎合访问你网站的用户的设置喜好。当文字大小变换时布局也不会被破坏。

　　技术方面

　　当我们几年前开始做响应式设计时，我们会先创建一个pc网站，然后增加媒体查询为小尺寸屏幕改写样式。我们发现这种做法并不正确。现在我们都知道创建CSS最好是先从小尺寸屏幕开始。毕竟变大是容易的——树会生长，婴儿会长大——缩减很困难。有没有试过精简一辆汽车?一定程度是可能的，但还是很辛苦。

　　在大多数情况下，从小尺寸屏幕做起是合乎逻辑的。当要把东西做的更大时，我们只需要为大尺寸屏幕添加一些媒体查询然后调整布局就可以了。但我认为这并不是真的指小屏幕，而说的是默认状态。

　　优先默认设置

　　我们需要确认的第一件事不一定是小尺寸屏幕的样式，而是默认设置：各个地方浏览网站时的样式，无论屏幕大小。这些样式包括字号、留白、品牌风格如边框和背景之间的关系。由于这些样式是每个终端都会用到，则不应该放在媒体查询里。需要在媒体查询里定义的内容应该是在基础样式上的一些例外(比如更小号的字体)或是补充(比如栅格)。

　　这就意味着只有当某个特定的元素在小尺寸屏幕上显示有差异时，我们才使用媒体查询。这样想想你就会发现这种情况有很多：页头、导航以及其他复杂的元素在小尺寸屏幕上常常是根本不一样的。像我举的例子一样，把这些元素的代码放在一个媒体查询里是正确的，因为它相对于默认设置来说是个例外