石家庄网站建设：响应式排版——快速教程

2019.08.16 mf_web

116

排版是我们传达信息的主要方式。对于印刷品，网站甚至电视广告来说都是如此。你不能不同意排版是一个强大的设计元素。但是，正确的做法可能有点棘手。排版并非一刀切，但这通常是我们在网络上接近它的方式。我们理解响应式设计的价值，但我们很少设计响应式排版。

我打算告诉你，响应式排版很重要也很容易实现。石家庄网站建设

排版是一个大问题

排版是设计的基本组成部分; 我们都知道这一点。在网页设计中，排版有一个粗略的开始 - 就像很多设计元素一样; 我们没有很好地显示字体的技术，甚至没有开始支持其中的许多字体。即使在5年前，创建基线对齐也很繁琐而且很难。但幸运的是，我们已经过去了。

排版是一个大问题，因为它有助于我们沟通。当它正确完成后，我们的沟通将变得更加清晰和有效。可读性是所有设计需要解决的大问题。所以说，让我们设计一些文字。

设置您的内容

您可以在下面看到仅包含文字的内容图片。我已经复制了维基百科的一段文本，并将其放入一个简单的HTML文档中。响应式排版

这非常简单。这也很难阅读。上面的屏幕截图展示了浏览器默认值，如16px Times New Roman。这很难过，所以我们将它升级到18px PT Serif，这是一个谷歌字体。

排版示例

这个设计需要解决的下一件事是每行的字符数，在桌面上应该是60到75个字符。为此，我将体宽设置为580px。比较上面的内容，你会同意限制每行字符有帮助。但这只是一个开始。

创造垂直节奏

在我们当前的设计中，垂直节奏由默认元素设置，通常由每个浏览器以不同方式指定。那是不对的。我们需要为我们的排版找出合适的行高，边距和字体大小。在我将默认正文字体大小设置为18px之前，我已经提到过。那将是我的1em。

现在，有些人更愿意通过眼睛和其他数字来做到这一点。如果你是一个数字类型的人，有各种工具可以帮助你进行数学计算。我最喜欢的是Pascal Cauhepe 的Vertical Rhythm Tool。另一个最喜欢的是Gridlover通过图奥马斯Jomppanen和威乐Vanninen。

在我的设计中，段落或正文字体大小为18px，行高为1.77，即32像素。我正在使用黄金比例来扩大标题，这意味着H1是3次或54次。下面是不同字体大小的细分。这些中的每一个都将与同一基线网格对齐，该网格本身基于32px线高。

字体大小

P 18px（1em）

H1 54px（3em）

H2 45px（2.5em）

H3 36px（2em）

H4 32px（1.75em）

H5 27px（1.5em）

H6 18px（1em）

创造垂直节奏

你可以看到这是孩子的游戏; 找出垂直网格非常容易。当您首先执行垂直网格时，这是有益的，因为它可以帮助您确定水平网格。

创造垂直节奏

缩小规模

很多时候，一旦确定了垂直节奏，我们就会转向其他事物，如颜色，网格甚至布局。确定网格系统中的断点非常重要，但您不能忽视响应式排版。根据屏幕尺寸调整垂直节奏也很重要。在移动设备上使用与桌面相同的字体大小和间距与使用相同类型的网格一样荒谬。移动设备的使用方式与桌面不同 - 意味着阅读它也是一种不同的体验。

iA在2012年的背后写下了广泛的和平，今天也是如此。（您应该阅读文章“ 响应式排版：基础知识。”）前提是您握住和阅读手机的距离与桌面显示器的距离不同。反过来，这是影响阅读体验的基本因素。他们绝对正确。桌面屏幕与移动屏幕上的文本比例不同，需要加以解决。看一下下图，您会发现18px的机身字体对于移动设备来说太大了。它极大地放大了副本，并没有为良好的阅读体验提供良好的视觉平衡。你缩小了字体。

移动垂直节奏

当您创建最佳移动体验时，您必须先查看排版。在如320px宽度的紧凑空间中，所有其他附加元素 - 无论是装饰性的，如纹理或渐变，还是内容，如图像 - 都必须排在第二位。并不是说它们不那么特别，它们不如书面内容重要。然而，文本需要更多的爱，而不仅仅是从其他元素呼吸的空间。它需要适当的风格，以提供良好的移动阅读体验。

缩小规模

这样做的第一步是实现在移动设备上使用更小的字体大小是可以的。我们的移动设备与我们的面孔相比更接近我们的监视器。这意味着字体大小甚至小到14px，看起来不像在计算机显示器上那么小。建议移动设备上每行的字符应保持在35到40个字符的范围内。

设置新的节奏

P 18px（1em）14px（1em）

H1 54px（3em）35px（2.5em）

H2 45px（2.5em）31px（2.25em）

H3 36px（2em）24px（2em）

H4 32px（1.75em）21px（1.5em）

H5 27px（1.5em）18px（1.25em）

H6 18px（1em）14px（1em）

以上是上一个图表的扩展，但这次您可以比较桌面和移动设备之间的比例。此外，我建立的线高为22px。它似乎是PT Serif的一个好的和舒适的数字。如果它是一个更薄，无衬线字体我会倾向于至少看看20px的线高度是否会运作良好。它不在这里; 即使在手机上，20px的线高也会让事情变得过于狭窄。

Web排版的比例

Jason Pamental为Typecast做了一篇关于响应式排版的客座文章，“ 用于网络排版的更现代的比例。”请阅读它。他解释了为什么缩放排版对于不同的断点很重要。在其中，他指出了关于排版的三个非常重要的观点。

“哇人们倾向于阅读; 跟随一条线到最后并轻松回到下一条线的开头的难易程度; 并快速了解复制块之间各级标题的相对重要性。”

当排版得到这三个因素时，阅读体验变得和谐。他是完全正确的。

活版印刷

结论

排版是一个重要的设计元素; 适当地使用它。假设字体大小和间距适用于所有设备是愚蠢的，因为它没有。您不会以与查看笔记本电脑或台式机显示器相同的方式查看手机。平板电脑也是如此。对于响应式设计而言，为每个设备包含不同的垂直节奏非常重要。如果您为用户创建了一个适合的阅读体验，您将创建更好的用户体验。让我们不要忘记 - 排版是一个大问题！

石家庄网站建设