跳到主要内容

使用比例RWD缩短构建时间

无论你如何工作,实施的原则响应式网页设计(RWD)对一个庞大而复杂的项目来说可能很棘手。无论喜欢与否,获得多设备的神圣基础,跨平台布局都有明显的开销。

您的内容和框架所要求的断点和网格更改越多,维护项目就越复杂和耗时。在最糟糕的情况下,一个优雅的开始可能会陷入一种特殊的噩梦和混淆的压倒性声明。使用膨胀的CSS和增加的页面加载可能会影响您的网站性能。

扩展已经记录良好的响应技术,我们将寻求形成可预测的响应缩放模式,这可以产生更清晰,更轻的CSS和更高的可维护性。

结合基于em的布局和排版以及灵活的宽度,我们可以提供一致的大屏幕设计,其中所有元素都充分利用可用的屏幕空间和分辨率。更改布局一次,您可以安静地确信更改已反映在所有断点中,并且全部由单个CSS声明控制。听起来不错吗?让我们开始吧。

处理屏幕

任何响应式站点的关键在于定义主要和次要断点如何允许灵活的网格崩溃或同等地扩展。无论您的首选工作流程如何,使用模块化样式指南生成视觉效果或在浏览器中进行设计,视口宽度及其对我们内容的影响都应该推动我们的设计决策。

Differing screen resolutions can have a marked effect on both the layout and legibility of your content

不同的屏幕分辨率会对内容的布局和易读性产生显着影响

但视口宽度不是它的结束。我们还必须应对具有不同分辨率的多种物理屏幕尺寸。您的内容可以根据显示放大和缩小。它可以对您的内容的易读性和布局的有效性产生显着影响。例如,设置为在大型显示器上看起来舒适的排版将完全不适合较小的设备。

这不是一个新问题。事实上,屏幕分辨率一直是我们设计网站的限制因素。还记得960网格,还是之前设计的760? RWD灵活的布局方法帮助我们协商了这一限制。然而,它仍然可以带来一些挑战,令人惊讶的是,它还有机会。

比例思维

在很多方面,响应式排版已经在某种程度上解决了我们的问题。当屏幕房地产收紧时,遇到标题和副本缩小的网站是很常见的。

在由缩小的视口触发时,文本也可以被视为对屏幕分辨率应用适当的缩放。减小字体大小变得可以接受,因为减少部分地通过较小分辨率的放大率来抵消。响应式排版最常见也可能是效率最低的方法是简单的样式,然后在各个断点处重新排列元素。客户端脚本也经常用于动态调整标题大小,最大化其大小以适应可用空间,FitTextSlabText是一些比较流行的开源项目。但是还有另一种方法,一种简单但功能强大的技术,应该能够吸引我们的兴趣。

用相对单位控制比例

毫无疑问,您已经使用像素来确定排版和布局的大小,为什么不呢?将设计转换为HTML需要一个通用单元,使用像素没有任何问题。但是有一个缺点。像素是绝对值,忽略了环境的背景。 (人们常常接受单个CSS Px等同于物理屏幕像素。在高清晰度世界中,情况并非总是如此。)

Ems不同。定义为字体相对长度,它们与父元素的font-size成正比。将此值定义为百分比将按该因子缩放ems中定义的任何子属性。在文档的根目录上设置字体大小,会对您的印刷比例产生全局影响。

Typesetting your headings and copy with relative units allows for a simple, yet powerful approach to responsive typography

排版标题并使用相对单位进行复制,可以实现简单而强大的响应式排版方法

让我们创建一个HTML字体大小的基本文档100%标题设置为ems。现在,将HTML字体大小降低到80%。 Ems中定义的所有内容都将按比例缩放80%。我们可以通过引入媒体查询来更好地利用这一点。

例如:

@media screen and(max-width:55em){html {font-size:80%; }}

通过模拟不同的视口宽度,您可以了解我们的排版现在如何缩放。通过定义上面的字体大小,这可以双向工作100%我们也可以放大我们的文字。

@media screen and(min-width:75em){html {font-size:135%; }}

一个简单的前提,但功能强大。通过使用此方法,您可以使用单个CSS声明有效地控制整个站点的排版大小,完全避免重复定位单个元素的需要。如果您的文档的垂直节奏由相对单位组成,它也会精美地缩放。在CodePen上找到一个这样的实例

添加更多结构

正如我们所看到的,用ems定义我们的排版可以让我们充分利用它的相对属性。但是ems不仅对印刷元素有效,我们可以使用它们来定义任何CSS测量,并且在这样做时,我们将它们绑定到与根字体大小的关系关系。

听起来不错。但如果你不小心,ems可能会带来麻烦。嵌套时,它们可以通过继承产生不必要的缩放。但是,ems以rems的形式拥有更多对继承友好的对应物。

Rem以与em相同的方式运行,唯一的区别是它直接查看根字体大小的关系值。这适用于我们的继承问题,非常适合我们的应用程序。

尽管领先的浏览器在媒体查询的同时广泛支持rems,但是对于CSS前支持,我们可以使用px值作为单位回退。

Use ems and rems to define CSS measurement values, creating a relational relationship

使用ems和rems定义CSS测量值,创建关系关系

扩展我们之前的示例,让我们添加更多结构,确保在rems中定义所有布局和排版,但有一个例外。由于Safari存在问题,我们需要在标准ems中定义媒体查询。您可以查看CodePen上的扩展示例

有了这个,整个布局现在可以缩放,随着屏幕变窄变小,随着变宽变宽变大。但重要的是,它与我们的排版和周围框架保持成比例。但是,老实说,如果没有灵活的网格,我们就会摆脱真正的响应式布局。我们需要一个计划。

我们仍然可以通过与通常处理响应式构建的方式完全相同的方式实现灵活的布局。我们只需要在我们将百分比引入混合的地方展示一点纪律。在我们的文档中可视化两个独立的效果平面是有帮助的。

攻击计划

水平:构成文档组合宽度的任何内容都定义为百分比。这包括以下内容:宽度余量填充,和左边框

垂直和其他一切:在rems中指定并绑定到文件root Font-size它应该是我们的默认单位,包括:MIN-最大宽度最佳底部相对的,和绝对定位。

让我们付诸行动:

html {font-size:100%; } h1 {font-size:2.75rem; } h2 {font-size:2.125rem; } .wrapper {width:100%;最小宽度:50rem;保证金:0自动; } .header {position:relative;宽度:100%;身高:3rem; } .header-logo {position:absolute;顶部:1rem;左:6%;宽度:5rem;填充:1.3rem 1.5rem; } .article {overflow:hidden; } .article-content {float:left;宽度:56%;填充:2rem 6%4rem; } .particle-aside {float:right;宽度:26%;填充:1.5rem 5%3rem 0; } .article-figure {padding:0 2%; } .article-figure> img {margin:1.5rem 0 0; } .auxiliary-list {margin:0;填充:0 0 0 6%; } .auxiliary-list> li {display:inline-block; }。-item {width:19%;保证金:2rem 5.6%2rem 0;填充:3.1rem 0; } .footer {width:97%;填充:3rem 0 0 3%; } @media screen and(max-width:55em){html {font-size:80%;}} @media screen and(min-width:65em){html {font-size:115%}} @media screen and (min-width:75em){html {font-size:135%; }}

为简洁起见,我们仅处理示例中的布局。您可以查看CodePen上的完整样式

这一切看起来都非常简单,但是,由于百分比控制着我们布局的两个方面,它可能会有点混乱。因此,需要明确的是,使文档整体宽度的百分比不会受到根缩放的直接影响。通过保持这种分离,我们可以生成一个既灵活又可按比例缩放的网站。

Anything that makes up the combined width of the document should be a percentage, everything else should default to rems

构成文档组合宽度的任何内容都应该是百分比,其他一切都应该默认为rems

在野外

虽然这些简短的示例显示了我们希望实现的基本前提,但其实际应用程序通常依赖于将设计组合转换为样式化HTML。为此,我们需要一种在rems中表示像素测量的方法。

幸运的是,这已经存在了。这是你应该已经熟悉的公式。它与我们用于在响应式工作流中找到比例百分比的那个相同,即:

Target÷context = Result

因为rems是字体相对长度,所以我们的上下文然后绑定到根字体大小。假设HTML字体大小为100%相当于16px的,然后是一个示例测量58px将58除以16等于3.625 rem。将基于px的字体大小转换为rem单位也是如此。用手写出我们的rem值是完全可行的。但这本身就会产生开销,成为高效工作的障碍。使用像Sass这样的CSS预处理器可以为我们节省很多繁重的工作。通过简单的mixin,我们可以以像素为单位定义所有测量值,使我们的CSS更容易消化。

$ em-root:16px!default; @function rem($ target,$ context:$ em-root){@return($ target / $ context)* 1rem; }

隐藏的好处

经常被忽视的是,浏览器缩放功能允许用户控制网站的放大率。它是视障人士的一套辅助工具的重要组成部分。未经测试,可能导致布局意外行为,可能会影响网站导航。随着我们的扩展模式的到位,我们发现自己复制了这种原生行为,并且针对它的测试成为我们工作流程的重要组成部分。

By maintaining two planes of separation, we can have a site that both scales proportionally and maintains a flexible structure

通过保持两个分离平面,我们可以拥有一个按比例缩放并保持灵活结构的站点

缩放还有助于我们在更多屏幕上呈现更一致的体验。这种一致性有助于在与更大的团队合作时找到工作流程效率。可以减少关于内容如何回流以及相关复杂性的许多对话。测试和QA变得更容易,因为在大屏幕体验中期望是相同的。这可以让我们投入更多时间来制作互动和整体体验。

太过分了

缩放内容有其局限性。不要使用它来损害您的小屏幕体验。通过移动优先方法,比例RWD可以很好地工作。我们可以通过引入一个主要断点来制作我们的小屏幕体验,该断点定义了一个小型和大型屏幕布局,每个布局都由一个独立的缩放模式控制。

结论

简单的执行,将灵活的宽度与比例缩放相结合,可以带来许多好处。它实现了我们的响应目标,同时为我们的受众呈现一致,可预测的布局,并减少了重新流动内容的需求。通过回应浏览器本机缩放功能,我们可以根据低估的可访问性功能来测试我们的设计。

在较大的项目中,布局的缩放减少了对冗余CSS的需求,并允许更高效的团队工作流程,削减我们的设计和构建时间。

:Dan Nisbet

这篇文章最初出现在网络杂志问题253。



翻译字数超限