首页 > 代码库 > 如何合理高效地设置响应式设计的响应点

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

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

多种因素决定理想尺寸

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

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

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

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

响应点范围

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

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

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

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