使用基于em的大小设计响应式网站

您可能听说过应该使用相对单位来表示字体大小。这是可访问网页设计的一个很好的规则;如果用户更改了浏览器的默认字体大小,则可以使页面的文本相应地调整大小。您可能已经采纳了这个建议并进行了转换。也许你拿出了你的计算器,并将你的网站的字体大小从绝对转换PX单位到ems,或者更有可能是rems。

但如果那就是你停下来的地方,那么你就错过了ems为浏览器带来的许多灵活性和强大功能。 Em单元不仅仅是熟悉的替代品PX;您可以将它用于更多属性而不仅仅是字体大小。如果你这样做,它的一些其他好处开始出现。

通过一致地使用ems,您可以在页面上设计组件,如果字体大小发生变化,它们会自动响应。然后,通过巧妙的技巧来响应字体大小,您可以生成一个基于浏览器视口宽度动态调整的整个页面。让我向您展示如何利用ems的“相对”行为来创建可扩展和响应的设计。

字体大小单位

使用ems的字体大小可能会很棘手。确切的值由元素的继承字体大小(即父元素的字体大小)确定。当您更深入地开始嵌套元素时,这会变得复杂。如果元素的字体大小为ems,则其父元素的字体大小为ems,而其父元素的字母大小为ems。您必须将所有这些值相乘以确定子元素的实际计算值。

这意味着将相同的模块放在不同的容器中可能会改变em的含义。该模块将无法预测。

为避免这种情况,我们通常使用不同的相对单位来表示字体大小:rems。 rem(或“root em”)不是基于继承的字体大小,而是基于页面根元素的字体大小,。这意味着它在整个页面中的值是相同的。它比常规ems更可预测,并且通常更可取。

使用ems构建模块

让我们使用相对单位来构建一个模块。但是,我们不会遵循共同的方法。我们不会将rem用于所有内容,而只使用它一次:在模块的最顶层元素上。这将为模块建立已知的字体大小,而不是基于DOM中不可预测的em值链。这意味着我们可以通过覆盖单个值来轻松扩展模块的大小。

Use rems on the outermost element to establish a known font size, then use ems to build based on that value

使用最外层元素上的rems来建立已知的字体大小,然后使用ems基于该值进行构建

在我们建立这个已知的字体大小后,我们可以安全地在整个模块中使用常规ems。不仅可以用于子元素上的任何字体大小,还可以用于大多数其他属性,包括填充余量边界半径

我们将构建一个带有标题和正文的面板。标记看起来像这样:

看看ems的力量

考虑可以利用相对单位来动态调整模块大小的方法。

让我们设计外部容器的样式。我们将字体大小设置为1rem建立我们的本地em值。然后我们将定义边界半径使用ems。我通常喜欢使用px作为边框,以获得一个很好的细线。

.panel {font-size:1rem;边框:1px solid#678; border-radius:0.3em;溢出:隐藏; }

接下来,设计内部元素的样式。我们将使用ems进行填充。然后我们将标题的字体大小增加到我们本地em值的1.25倍,产生20px的计算大小。

.panel-heading {padding:0.6em 1.2em; background-color:#cde; border-bottom:1px solid#678; } .panel-heading> h3 {font-size:1.25em;保证金:0;字母间距:0.03em; } .panel-body {padding:0.6em 1.2em; }

您可以将填充值乘以其字体大小以确定其计算值(垂直9.6px和水平19.2px)。然而,说实话,这并不重要。尝试不要陷入像素完美的测量。这可能会感觉很尴尬,但请按下。你使用ems的次数越多,你就会越熟悉它们作为一个单元。

动态扩展设计

当我们创建这样的可重用模块时,我们经常发现我们需要一些变化。假设我们想要创建一个更大的版本。如果我们将px用于所有内容,则意味着增加字体大小,填充,边框半径等。但是,因为我们已经定义了与一个基于rem的字体大小相关的所有内容,所以我们只需要更改该值,整个模块将响应:

.panel  -  large {font-size:1.2rem; }

我们只需将此类添加到面板中以使其更大:

。这将改变em的局部定义,从而改变边界半径和填充以及其子元素的字体大小。通过单一声明,我们调整了模块的每个部分的大小。

A panel module, with paddings and border radius defined using ems

面板模块,使用ems定义填充和边框半径

同样,我们可以创建一个小版本:

.panel  -  small {font-size:0.8rem; }

通过在rems中使用顶级字体大小将模块接地,我们使其稳定且可预测。通过使用ems定义其他所有内容,我们使其所有组件都可以扩展。

It is possible to base the size of everything inside the module on one value, then change that value to scale it all

可以将模块内部所有内容的大小基于一个值,然后更改该值以将其全部缩放

这是一个强大的模式。您可以将此方法用于页面上的任何内容,从下拉菜单到社交媒体按钮。使用rem值将模块接地,然后使用em实现从填充到定位到图标大小的几乎所有其他操作。

使其响应

让我们将原则进一步推进。我们使用rems和ems来确定模块的大小(理论上是页面上的所有其他模块)。这最终意味着它们的大小基于根元素的字体大小。然后,我们可以调整此单个值以使整个页面依次响应。

让我们带来另一个相关单位:VH。该单位的计算值来自用户的屏幕尺寸;它等于视口宽度的1%。如果我们使用vh单位来定义根字体大小,它将自动按比例缩放,无法进行媒体查询。将根目录上的字体大小设置为2vw

Html {font-size:2vw; }

不幸的是,效果有点过于强烈。例如,在iPhone 6上,这将计算为5.5px,这太小了。同样,在更大的屏幕上它是不合理的大。为了软化效果,我们可以使用CSS计算值()功能:

html {font-size:calc(0.6em + 1vw); }

现在,字体大小部分来自稳定值,部分来自响应式。这产生了更好的效果。该0.6em表现为一种最小字体大小。现在,root平台将在智能手机上从大约13px流畅地扩展到平均桌面屏幕上的21px。

您的页面由可扩展模块组成,每个模块都基于rem值,并且它们也将随视口缩放。该页面采用三层结构;您可以通过简单地编辑字体大小来更改整个页面,单个模块或单个元素的大小。相信ems和rems,浏览器将为您处理工作。

您可能仍需要添加偶尔的媒体查询来控制换行和其他一些响应问题。但是这一小段代码加上使用ems和rems的习惯会让你获得很多。

这篇文章最初的特色是网络杂志问题288;在这里买

相关文章:



翻译字数超限