vb效率和可读性_“可读性优先”的媒体查询和布局方法-优快云博客

vb效率和可读性

近年来出现了几种不同的方法来进行多分辨率友好的网页设计以及媒体查询的应用。您可能已经听说过的一些做法包括：

“移动优先” -从面向手机的狭窄宽度（约320像素）开始，然后从此处开始增大尺寸。
“桌面向下” -从全尺寸设计开始，然后根据需要缩小。
“内容优先” -在流程开始时建立测试内容，然后逐步围绕它进行设计。
“特定于设备” -针对一系列特定于设备的分辨率，其中的断点对应于相应的px值，例如，电话的分辨率为320px至480px，平板电脑的分辨率为768px至1024px，台式机为1200px +等。
“设备不可知” -创建一个“适合所有人的设计”系统，可以灵活地适应任何分辨率。
“ Goldilocks方法 ” -将基本字体大小留给浏览器或用户设置为首选，然后使用以下三种布局在其上方构建em驱动的布局：“太大”，“太小”，“恰好”。

在本文中，我将讨论一种上述方法的结合，并引入了一些其他方法。它既是“内容优先”又是“设备不可知论”，最初是受基于排版的em的启发“金发姑娘方法”。

我喜欢将其视为“可读性优先”的方法。这种方法产生的设计：

根据有关普通读者眼动的研究数据，针对可能的最简单，最舒适的阅读体验进行了优化。
流畅地调整为任何分辨率，即使在最新的“ 8.3459英寸迷你冰箱电话”上也是如此 。
与浏览器或用户字体大小设置成比例缩放。

构成这种方法的想法并不是什么新鲜事物，但是它们融合在一起以创建一种特殊的响应式设计。

为了配合这种风格，我还将与您共享一个名为“ RDBL ”的脚本，该脚本是为了帮助您评估文本内容在各个点上的可读性而创建的。即使您不采用“可读性优先”的方法，您仍然可能会发现此小部件对您使用的任何响应式设计方法都是有帮助的。

“可读性至上”原则

有四种简单的原则构成了这种“可读性优先”方法的基础，尽管从一种设计到另一种设计的实现方式将有所不同。它们如下：

留给浏览器或用户首选项

The Goldilocks Approach引入了一个概念，即不使用默认值，而不为文档设置显式的基本字体大小。

其背后的总体思路基于以下内容：

浏览器具有默认的字体大小，根据分辨率和像素密度，这些字体被认为是各种设备最易读的字体。
用户还可以将自己的默认字体大小设置为对他们来说合适的水平。

通过不使用您自己的基本字体大小覆盖这些默认设置，您可以允许设计的文本根据浏览器和用户喜好自动调整大小。这样一来，您就可以在各种设备上轻松阅读，并从一开始就对个人有所了解。

在某些情况下，如果相对于默认大小的大多数其他字体而言，字体特别小或太大，则可能需要进行调整。即使在代码中设置为假定的相同大小，两种字体的实际大小之间也会有相当大的差异。

但是，如果确实需要缩放默认字体大小以对其进行规范化，请使用应用于html元素的相对值（例如，百分比或em）来进行缩放。这样，您的整体文本大小仍将由浏览器/用户设置确定，并且可以实现此方法的其余原理。

html { font-size: 100%; }

2.在设计过程的开始而不是结束时输入虚拟内容

当我们想到Web“设计”时，很容易陷入流程的“设计”部分，有时仅在其他步骤完成后才在流程的最后部分添加内容。

但是，在我们的方法中，在完全应用任何视觉样式之前，在流程的开始就添加了文本内容。大致的总体过程是：

在section或article元素中插入伪文本。
选择将要使用的font-family和font-weight设置。
添加基于单元的相对CSS，以优化可读性的方式来控制此文本的布局（在接下来的部分中将对此进行更多介绍）。
将视觉样式添加为此布局顶部的一种“绘制作业”，并根据需要进行调整。

这本质上是与过去流行的过程相反的，在该过程中，设计从PSD中的视觉样式开始，然后将生成CSS布局代码以适合设计，并添加版式CSS代码以模仿PSD中的内容。，最后会插入一些虚拟文本来演示最终产品。

我们跳过此过程的原因是：

为了使视觉“绘画作业”成功地适应灵活的布局，您需要知道该布局是什么。
要生成灵活的，可读性优化的布局，您需要查看其中的文本在浏览器中的显示方式。
要查看文本的显示方式，您需要了解其font-family和font-weight因为它们可能会引起尺寸变化。
要选择和应用font-family和font-weight设置，您需要虚拟文本。

因此，尽管可以在稍后的过程中对版式设置进行微调，以完善设计，但是在确定布局和样式之前，应将font-family和font-weight的基本选择应用于虚拟文字。

3.使用相对％和em / rem值（而不是px）构建设计

通常，此方法不使用px单位。取而代之的是，从高度和宽度，边距和填充到边框半径和宽度的所有内容rem相对%和em / rem单位设置。

这样做的主要原因是：

通过在布局包装器和列上使用%值，您可以创建一种设计，使宽度在断点之间流畅地流动，而不是从一个宽度跳到下一个宽度。
通过在其他所有rem上使用em / rem值，您的整个设计将与浏览器/用户设置的基本字体大小成比例缩放。

基于流体％的包装纸和色谱柱

要在您的设计周围创建一个包装，以允许在断点之间使流体流畅地适合视口，请使用以下技术：

.wrapper {
    width: 100%;
    max-width: 40em;
}

首先，我们将包装器设置为视口宽度的100％。这意味着如果访问者在两个断点之间的某个位置查看您的设计，他们将看不到外部的空白空间，而是可以与边缘适当地齐平。

但是，在宽屏显示器上以100％宽度的文本将根本不容易阅读。因此，我们然后输入max-width设置为40em，这意味着即使在大型监视器上，站点的包装器也永远不会超过此数量。如以下各节所述，可以进一步调整该值以提高可读性。

此包装器中的列也可以应用%值，而不是px ，因此它们也将在视口中流畅地调整。通过确保将设计的box-sizing属性设置为border-box可将填充和边框应用于em值中基于百分比的列，而不会浪费布局。列的边距应设置为％值。

注意：在我关于网格混合的文章中，阅读有关使用这种布局系统的更多信息。

统一可扩展的em / rem布局设计

通过使用em / rem而不是px ，设计的各个布局方面将始终与文本内容保持最佳关系。无论浏览器或用户进行什么设置，整个设计的基本字体大小都会成比例地缩放，否则文本将只改变固定容器中的大小：

如果按比例缩放设计，不仅外观会更好，而且阅读起来也更容易。我们非常在文本内容周围留出间距，目的是使访问者尽可能容易地阅读该内容。仅当间距与文本大小一起缩放时，我们才能确保我们保留这些经过精心设计的布局元素的好处。

4.将主要文本内容保持在每行字符的理想范围内

自然，在“可读性优先”方法中，核心重点是文本内容及其表示。大多数站点都有一个存放其主要内容的区域，因此，我们从优化该空间以提高可读性开始。一旦优化了主要内容区域，即可在其周围构建其余布局。

我们优化主要内容区域以提高可读性的方法是，针对每行指定理想的字符范围，根据研究，这对于普通读者而言将是最舒适和自然的。

每扫视的字符数，每行扫视的字符数

当我们阅读文本时，大多数人不会一次看到每个字母或单词。取而代之的是，我们倾向于一次将眼睛对准一组字符，并使用外围视觉将其全部纳入。每次眼睛从一组字符移动到下一组字符时，这种跳跃称为“扫视”。一个扫视范围可以覆盖1到20个字符，但平均范围是7到9个字符。

如果每行中的字符/扫视点太多，则眼睛会变得劳累而疲倦，并且如果阅读者太多，则读者不得不中断焦点以太频繁地转到下一行以正确吸收内容。

关于普通读者习惯于每行制作的扫视的确切数目，存在一些争论，但是经过大量研究，我发现大约9的值倾向于达成普遍共识。基于这些数字，为了使普通读者具有更好的可读性，每行字符数应介于63（对于七个扫视）和81（对于九个扫视）之间。

请注意，这些数字应作为一般指南。严格说来，一个奋斗的读者可能会在九个扫视中只吸收9个字符，而熟练的读者则可能吸收180个字符。因此，虽然您应该以该范围为目标，但是如果您的布局比该范围稍高或略低，则完全可以。

如何实现“可读性至上”

现在您已经熟悉了“可读性优先”的原理，我将逐步指导您如何在布局中实现它们。我将通过向您展示如何创建我之前提到的RDBL脚本的演示来完成此操作。

为了演示，这只是单色的“程序员艺术”，但是您可以将这些原理和技术应用于几乎任何设计风格。

从找到最大的基于em的可读宽度开始

为了使您的主要内容区域最多每行最多约81个字符，即使是宽屏布局，也需要相应地限制其宽度。通常，最大宽度大约在35em左右-40em给出或吸收一些“ em”。

这与我们上面讨论的流体现场包装纸的宽度（100％宽度，最大约40em）紧密相关。此最大宽度设置将是您要调整的值之一，以使每行的字符数保持在可读上限以下。因此，如果您要创建单列设计，则站点的外部包装应该在35em-40em左右，加上您在文本周围放置的填充量。

另一方面，如果要创建多列设计，则列宽也将添加到包装的总宽度上。例如，如果您的主要内容区域的宽度必须不超过40em，并且内部宽度为66.66％，并且旁边的侧边栏为33.33％，则外部包装器元素的max-width设置应为60em。乍一看这可能很复杂，但实际上在实践中很容易实现，如下所示。

无论您做什么设计，都将首先确定主要内容区域需要保持在可读性范围内的最大宽度。确定上限后，您可以开始添加其他布局元素，然后针对最大宽度和零之间的整个范围尽可能地进行流畅的优化。

通过优先考虑可读性，您不会选择首先考虑特定的设备类型，例如台式机或移动设备。相反，您正在考虑所有设备和浏览器分辨率，并从一开始就同时计划它们。

使用RDBL查找最大可读宽度

最初，我结合使用了调整浏览器大小，宽度读取插件，字符计数器，Firebug和计算器的组合，以便确定最大宽度。但是在开始本文之前，我决定使用一个脚本为您处理整个过程，从而使自己和您的生活更加轻松。您可以在GitHub上获取脚本的副本。

RDBL将为您提供一个位于设计上方的小滑块，并读出各种信息，在此过程中会有所帮助。您只需告诉它您要评估可读性的目标是网站的哪一部分，即您的主要内容区域，它就会告诉您该元素是“太宽”，“太窄”还是“在范围内”。

注意：脚本将自动（按优先顺序）查找article ， section或main标记，但是您也可以在“ Target Content Element”字段中输入任何类名或ID。

您可以拖动小滑块来调整站点的大小（这以更易于管理的方式模拟了调整浏览器的大小），并且它将随着您的进行自动更新读数。当绿色的“ In Range”显示变为红色时，您可以查看显示的信息以了解发生的时间。

您可以使用显示的信息来确定主要内容区域的最大可读宽度，为此，还可以粗略地估算出该可读范围是多少。

在此示例中，我从一个非常基本HTML布局中的一些虚拟内容开始，将article元素放置在main元素包装内（您可以使用任何喜欢的标签）：

<main>
<article>
<h3>Heading</h3>
<p>Put a few paragraphs of dummy text here.</p>
<p>I personally like Samuel L. Ipsum.</p>
</article>
</main>

注意：作为HTML文档的一部分，请确保包括视口元标记，以便稍后添加的媒体查询将在不同像素密度的设备上达到您期望的效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

然后，我还将应用一些非常基本CSS，仅保留默认字体大小，将box-sizing属性设置为border-box ，围绕内容创建流畅的包装，将主要文本内容设置为使用font-family “ Open Sans ”（来自Google Webfonts），该文本的font-weight为400 ：

* {
    box-sizing:border-box;
	-moz-box-sizing:border-box;
}
html, body {
	padding:0;
	margin:0;
	font-family: 'Open Sans';
}
main {
	width:100%;
	max-width:40em;
	margin:3em auto;
}
h3 {
	font-weight: 700;
}
article {
	font-weight: 400;
}

我要做的就是通过以下操作，使用RDBL来确定使用此font-family和font-weight文本的最大可读宽度。

首先，我将简单的布局加载到Firefox中，然后查看可读性小标志是红色还是绿色：

该文本的宽度为40em，每行约85个字符，太高了。这是取自目标元素中文本第一段的平均值。

现在我有两个选择。第一种是仅使用读数中显示的“估计的可读Em范围”中的上限作为我的最大值，在这种情况下为38.117em。但是，这是一个估计，因此我也可以使用滑块逐渐缩小站点，直到看到可读性标志变为绿色并采用此时显示的em宽度：

结果是38.5em，非常接近估计值。所以我将包装器的最大宽度设置更改为以下值：

main {
    width:100%;
	max-width:38.5em;
	margin:3em auto;
}

刷新后，RDBL现在将显示该文本处于其最大可能宽度的可读范围内。

添加填充

现在，我知道最大可读宽度为38.5em，我想在此内容的边缘周围添加一些填充。我将我的article元素CSS更改如下（具有背景色，以便您可以看到填充）：

article {
    font-weight: 400;
	padding:1.25em 2.25em;
	background: #F5F5F5;
}

为了允许在文章的每边增加2.25em的宽度，我在主包装的max-width添加了4.5em。您甚至可以通过使用CSS预处理程序变量来自动执行此过程。

main {
    width:100%;
	max-width:43em;
	margin:3em auto;
}

现在，添加了刷新填充，但是由于保留了38.5 em的内部宽度，因此可读性标记仍为绿色。

多列布局

如果我只是设计一个单列布局，那么知道我的主要内容已设置为最大可读宽度后，便可以继续进行下一阶段的设置断点。但是，多列布局又如何呢？

该过程与上面的过程基本相同：仅创建具有灵活百分比宽度的多列布局，然后使用RDBL滑块缩小站点，直到找到合适的max-width以应用于包装器以使内容保持在可读范围。

要通过添加边栏将该布局从单列布局转换为多列，我首先在article元素之后HTML中添加aside元素：

<aside>
Sidebar
</aside>

然后，我添加一些CSS，将文章和旁边的元素变成基于百分比宽度的列。因为我要添加额外的列，所以主包装器现在也需要变宽以容纳它。但是，我不确定包装器应确切地适合新边栏的宽度，并且仍将内容保持在可读的宽度。

因此，我暂时将主包装的max-width设置注释掉。这将使我能够使用RDBL滑动条将布局从100％缩小到找到应该应用的新设置。

main {
    width:100%;
	/*max-width:43em;*/
	margin:3em auto;
}
h3 {
	font-weight: 700;
}
article {
	float:left;
	width:65%;
	font-weight: 400;
	padding:1.25em 2.25em;
	background: #F5F5F5;
}
aside {
	float:left;
	width:35%;
	padding:2.25em 1.25em;
	background: #CCC;
}

然后，我刷新页面，并像以前一样逐渐减小布局的宽度，直到可读性标记变为绿色。

当该标记变为绿色时，“当前文档宽度”读数将显示一个66.25em的值，因此我取消注释主包装器的最大宽度设置并将其更改为66.25em。现在，刷新时，我有了一个流畅的两列布局，默认情况下，主要内容设置在可读范围内。

您可以使用相同的方法添加任意多的列，重置包装器的max-width然后使用RDBL缩小布局，直到找到应该应用的新值以保持主要内容的可读性。

查找可读性“断点”，然后通过媒体查询进行优化

最初，“断点”一词与被破坏的东西没有任何关系。但是，出于此方法的目的，我们将在字面上完全理解该词。在设计中采用最大可读宽度的情况下，我们可以开始按比例缩小尺寸，以找到可读性“中断”的“点”，即RDBL再次显示其红色标记时。然后，我们将添加媒体查询以调整这些位置的布局。

使用RDBL滑块减小两列布局的宽度，红色标记再次出现的第一个点是54.812em，这一次显示“太窄”，因为每行的字符数降至63以下。

这是第一个可读性“断点”，因此我将创建一个媒体查询以防止主要内容区域到达此点。我想在布局变得过于狭窄的点之前进行调整，因此我使用RDBL滑块再次将宽度增大，刚好回到绿色标记。在这一点上，读出的数据告诉我我的宽度为55em。我复制“媒体查询代码”字段的内容，并将其粘贴到我CSS中：

@media (max-width: 55em) { /*...*/ }

现在，我必须确定此时调整布局的最佳方法。我从设计的较早的单列阶段知道，主要内容需要最大宽度为43em。这意味着55em太宽了，无法将主要内容填充为单个列，因此我还不能完全将侧边栏移开。相反，我可以减小其大小，以使内容占用更多空间。

我通过减小aside元素的百分比宽度并增加article元素的百分比宽度来做到这一点：

@media (max-width: 55em) {
    article {
		width:70%;
	}
	aside {
		width:30%;
	}
}

现在，我刷新页面并再次开始缩小，这一次我超过了55em，主要内容仍在可读范围内。

当文本再次变得太窄时，可读性中断的下一个点是50.875em。再次，我将宽度微调到刚好回到绿色，然后从RDBL小部件复制媒体查询，这次是51em。这仍然太宽，无法将布局转换为单列，因此我再次增加了文章宽度并减少了侧边栏：

@media (max-width: 51em) {
    article {
		width:75%;
	}
	aside {
		width:25%;
	}
}

下一个可读性的断裂点出现在47.5em，并且侧边栏现在变得越来越小以使其更薄。但是，我仍然比最初在主包装器上设置的43em高一点，以使内容在单个列中保持可读性。那我该怎么办？

答案是继续进行，无论如何此时都将布局转换为单列，但要在article元素上添加足够的填充，以使其中的内容仍在可读范围内。因此，我在47.75em创建了另一个媒体查询，将文章填充增加到4em，然后将布局转换为单列：

@media (max-width: 47.75em) { 
    article {
		float:none;
		padding:4.5em;
		width:100%;
	}
	aside {
		float:none;
		padding:4.5em;
		width:100%;
	}
}

刷新后，一旦布局变得比47.75em窄，它就会在单列的可读范围内。

继续缩小可读性中断的下一个点，即40.187em，因为文本太窄。布局已经在单个列中，因此现在剩下的要做的就是为内容留出更多空间，就是减少填充。为此，我在40.5em处创建了一个媒体查询，并将填充设置回其原始数量。

@media (max-width: 40.5em) {
    article {
		padding:2.25em 1.25em;
	}
	aside {
		padding:2.25em 1.25em;
	}
}

有了最终的媒体查询，现在就可以安全地从默认的最大宽度一直缩小布局，将其保持在可读范围内，并在整个时间内流畅地填充视口。

如果您自己重复上述所有步骤，那么您会注意到，如果再次缩小比例，则会看到“太窄”红色标记。但是，您已经在最大程度上优化了可读性。如果文本太靠近边缘，则不能在不影响可读性的情况下进一步减少填充。您还可以猜测，以这种尺寸观看的任何人都可能在小型设备上，因此减小字体大小也只会进一步损害可读性。

这样，即使文本从此处向下偏离每行最小字符数以下，您实际上已经针对所有这些小尺寸进行了可读性优化，并且可以做到。

但是，低于此点的“太窄”标志不是主要问题，因为仅能够以小于此大小查看的设备仅占移动空间的2.9％，即使这样，每个设备也只能包含大约5-6个字符行太少，这仍然可以接受。

添加您的视觉样式“绘画工作”

一旦有了完整的可读性，就可以使用第一个流畅的布局，您知道在实现视觉样式之前必须要进行的工作。实际上，您可能会创建一些此类的未样式化布局，并在应用了不同样式后多次使用它们。

应用视觉样式时，您可能会发现需要将布局调整到一定程度，如果是这样，请使用RDBL不断调整设置，以确保您保持在可读范围内。

我不会在这里详细介绍设计，但是为了保持网站的流畅性，我提出了一些一般性建议：

只要使用em / rem值，就可以使用CSS3代替图像（例如，阴影，渐变，圆角，边框，发光），因为以此方式创建的样式可以完全缩放。
使用字体图标（例如Fontello）而不是图像图标，因为它们也会随着浏览器/用户字体大小而缩放。
在确实使用图像作为背景的地方，请尝试确保可以将其平铺以填充设计必须缩放以适合的任何空间。

注意：如果您习惯于使用Photoshop来创建大量由图像驱动的设计元素，则您可能希望使用Adobe Edge Reflow签出，而不是以一种您熟悉的方式生成CSS3样式的方法。在“ 立即使用回流可以做的5件事 ”中查看我的文章，以获取有关该选项的更多信息。

额外说明，技巧和总结

本文的实现部分中显示的技术只是如何使用“可读性优先”方法的一个示例。对于如何决定如何处理可读性“断点”，没有严格的规定，如果您要做出与我在完全相同的情况下所做的完全不同的调整选择。

每种设计都是不同的，您应该期望在应用这种方法时做出一些判断。如果您觉得不合适，那么请继续调整RDBL使用的每行范围的可接受字符，因为从一种字体到另一种字体的所有变化都不可能使它成为一门精确的科学。

您可以随时通过直接在小部件中更改值来随时更改每行范围内的字符，或者在运行脚本的初始化函数（例如init_rdbl(63, 90);时输入首选范围init_rdbl(63, 90);

当您向上或向下缩放布局时，如果看到红色的“ Too Wide”或“ Too Narrow”标志短暂闪烁，请不要担心。如果对于0.001ems的宽度显示的字符太少，那也不算什么。只要您只看到红色闪烁片刻，就可以认为布局在可读范围内。

我希望与您分享一些有关如何进行布局设计过程的新想法，并且至少以RDBL脚本的形式提供有用的工具。首先创建自己的内容，与设备无关， “可读性优先”的网站设计，请尽情享受！

翻译自: https://webdesign.tutsplus.com/articles/a-readability-first-approach-to-media-queries-and-layout--cms-19419