如何掌握响应式排版_极简慕枫

随着响应式网站的兴起，重要的是要看看网络排版是如何变化的，以及它的发展方向。在本文中，我们将首先介绍排版的基础知识，并解释Web设计人员在处理响应式排版时可以使用的解决方案。长沙网站设计

从过去到计算机的排版单位

古代单位出现在列奥纳多达芬奇绘制的维特鲁威人身上。

几个世纪以来，排版是一个具有严格工艺规则的领域。排版生活在自己的世界里这是由测量有序活字，点，西塞罗等。由于这些时间，印刷单位已建立了计算机图形：

• 字体是通过磅值来衡量的：你永远不会说“我使用的是3.527毫米的字体”，你会说，“我使用了10 磅的字体大小。”

• 1英寸= 72点：1点= 1/72英寸，或1点= 0.3527毫米。自20世纪80年代以来，这已经被全世界所接受，之后有几个印刷点来自英尺，英尺或毫米。

• Picas用于PostScript ：PostScript是一种描述布局外观的计算机语言，用于打印高分辨率设计。

• 在CSS中使用像素和ems ：Web设计被转换为CSS单位，通常是像素，但也可以使用ems。

每行字符（CPL）的重要性

设计师在使用类型时的主要关注点是它必须清晰易读。

这个60对90 CPL的例子证明了可读性问题。以下哪个例子更容易阅读？

当文本行太长时，会使阅读过程变得缓慢，困难和累人。为避免这种情况，需要轻松识别文本行 - 这取决于行高与行长度的比例，字母与单词之间的间距以及字母的形状和重量。您在每行中放置的字符数也很重要。以下是基本规则：

• 最多60个字符：处理文本行（不在列中）时使用此字符。

• 最多45-60个字符：将文本放在多个列中时使用此选项。

• 最多70-75个字符：将文本放入1列时使用此选项。

与任何设计规则一样，这可以根据每条线之间的前导进行微调。如果您想测试每行不同的字符（CPL），请查看这个资源丰富的网站，黄金比例排版计算器。以下是一些要记住的其他设计公式：

• 字体的磅值大小为2 =列宽（以皮卡为单位）
  

• 1 pica = 12分

• 1 em =当前特定点大小
  

为此目的使用印刷单元的原因是它使得定义这些类型的关系一致且容易。让我们看看上面的规则...说我们想要弄清楚列的宽度是在ems（而不是picas）中，我们使用的是10磅字体：

• 10点乘以2 = 20 pica列宽

• 如果20皮卡等于12点，那么20乘以12 = 240点

• 如果1 em等于10点，则240点除以10点= 24 em

响应式排版挑战

流畅的1列文本意味着我们无法控制CPL。

设计师在使用响应式排版时面临许多挑战。主要问题是在设计尺寸增大或减小时几乎无法控制CPL。我已经看过许多网站没有考虑排版的基础知识（例如CPL和使用高质量字体），但这样做非常重要。响应式设计使我们能够使用整个屏幕的宽度，这很好，但这并不意味着我们应该在2000像素宽的列中使用16像素字体。这并不意味着忘记提示，字距调整和其他技术方面的重要性。

此外，由于响应式网页设计针对的是移动设备，因此网站经常受到严格审查，删除的元素会减少带宽 - 首先要考虑的是网络字体。因此，如果您正在与希望针对低带宽用户进行优化的公司合作，那么只使用网络友好字体来简化您的设计。

Goldilocks方法（及其约束）

由Dunwitch Type Founders对Sybarite字体进行光学分级。

浏览与响应式排版相关的文章时，很容易看出响应式排版对不同的人来说意味着各种各样的事情。以下是您可能会找到的解决方案列表：

• 使用更大的文本和相对大小

• 使用字体图标（它们可以调整大小并可以使用CSS设置样式）

• 使用针对移动设备优化的Web字体（对不同的屏幕类型使用不同的字体）

• 根据黄金比例使用有意义的比例

• 使用适当的CPL比率（50-75）

• 缩放基本类型大小以匹配设备屏幕大小和分辨率（在CSS中使用ems时，所有字体大小都表示为与基本字体大小的比例）

• 根据脸部和显示器之间的距离调整字体大小（我遇到的最不寻常的概念）

每个概念背后都有很好的推理 - 字体等级，提示和光学缩放与类型的质量有关，黄金比例模块是一个惊人的主题，不仅仅是类型而是设计。但我们只讨论与RWD哲学和工作流程直接相关的概念：

• 缩放基本类型大小以匹配设备屏幕大小和分辨率

• 使用适当的CPL比率（50-75）

有些人通过使用em和％之类的相对单位来处理这些问题（不是绝对或固定单位，如点） - 优点是所有文本大小都绑定到单个参数。但是，这个概念比RWD本身更老，并且不考虑CPL或屏幕分辨率。确实考虑CPL和屏幕分辨率的一种解决方案是Goldilocks方法。

该金发方法在不同的屏幕分辨率。

这种方法的独特之处在于CSS少于3KB，它声称创建的布局可以保留每列约66个CPL，并将字体大小调整到不同的设备（考虑到分辨率！）。这些都是相当不错的成就，而且没有一行Javascript代码！但......世界并不完美，这些成就仍然存在一些制约因素：

1. Goldilocks方法依赖于浏览器的默认字体大小来定义em大小。因此，我们失去了对页面外观的某种程度的控制，因为很难将内容保存在ems中，因为图像总是以像素为单位进行测量。

2. 它不允许我们使用流体布局。

我的响应式排版解决方案

我创建的一个示例包含我的响应式解决方案。

虽然我非常欣赏Goldilocks方法的简单性，但我想要一个允许我使用100％屏幕空间（无论大小）的解决方案，并且让我在使用流畅布局时总是有60 CPL。我找不到。考虑到最近创建的RWD网站的数量，这有点令人惊讶。但我发现的解决方案非常简单。

如果不是以em为单位测量列宽，我们将值更改为像素。请记住， 1 em等于当前特定的磅值。因此，在保留60 CPL的同时允许流体缩放文本列的解决方案是：

• 实现多列布局：您可以使用CSS列计数来执行此操作。

• 将列宽从ems更改为像素：您可以使用此简单公式执行此操作 - body font-size =列宽（以像素为单位）/所需列宽（以em为单位）

看看我创建的这个包含这些响应式解决方案的示例。这是一个基于24 ems列的旧规则的保守设置。脚本检查列宽（以像素为单位），将此数字除以24，并将此数字指定为正文字体大小。这不是一个CSS框架 - 它只是另一种使排版响应的方法的一个例子，同时保持文本在流体布局中的易读性。

长沙网站设计