如何合理高效地设置响应式设计的响应点

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

多种因素决定理想尺寸

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

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

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

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

响应点范围

最近关于术语响应式设计里“响应点”的已经有一些讨论。Mark Boulton和Ben Callahan认为我们应该称呼它为“优化点”，而Jeremy Keith则在响应点和“调整点”之间犹豫不决。本章节内，我会聚焦在响应点上——也就是当内容需要更多或更少的展示空间时布局所发生的变化。现在我来介绍另一个术语：响应点范围。

我们称呼那些改变布局的媒体查询为“响应点”。我们倾向于把这些响应点作为直接的变化：当一个布局达到它的最大宽度时，我们立刻转换到下一个布局显示。转换之前先保持上一个布局并增加一些留白，这样的做法更好些。例如，一栏和两栏布局之间的转换会导致显示一个非常小的主栏。就像我之前说的，我们可以让它保持一小会，而不是在内容达到它的最大宽度的瞬间就立刻转换。这是绝对不会破坏布局的一个非常简单的绝招。

理想情况下，针对各种屏幕尺寸的不同布局应该根据内容单独定义。当然也会有一些情况是页面中其他的元素，比如banner，会直接定义内容的宽度。就算在这样的情况下，易读性理论会有所帮助；你可以为了让页面保持在一个完美行宽的边界里而去增减字号。只是不要把文字弄太小就好了——毕竟人们还是想要阅读它们的。

幸运的是在大部分情况下，传统的排版理论就可以助你决定响应式设计站点的正确响应点。你甚至可以根据不同的语言来创建不同的布局。当你在做一个大型的国际型站点时，这可能是个好想法。最最重要的是，不论是现在还是将来，运用本章节的理论来针对各种不同的屏幕尺寸更好的设计你的网站。我列举的案例用的是一个非常简单的栅格，不过结合更多复杂的栅格之后，本理论可以帮助创造更合理、精彩的网站。

 

转载于:https://www.cnblogs.com/gonrun/p/3777403.html