css calc 变量_如何使CSS变量和CSS Calc响应垂直节奏

css calc 变量

by Zell Liew

由Zell Liew

如何使CSS变量和CSS Calc响应垂直节奏 (How to make Vertical Rhythm responsive with CSS variables and CSS Calc)

Vertical Rhythm is an important concept in web design. It has the ability to bring a design together and make different elements feel consistent on the same page.

垂直节奏是网页设计中的重要概念。 它具有将设计融合在一起并使不同元素在同一页面上保持一致的能力。

It used to be impossible to change Vertical Rhythm at different viewports, because we didn’t have the right tools. But now, with CSS Calc and CSS Custom Properties, we can change Vertical Rhythm at different viewports. This article explains how.

由于我们没有正确的工具，过去在不同的视口中更改“垂直节奏”是不可能的。 但是现在，有了CSS Calc和CSS自定义属性，我们可以在不同的视口中更改“垂直节奏”。 本文介绍了如何。

计算节奏单位 (Calculating the rhythm unit)

A rhythm unit is the base multiple you’d use for the Vertical Rhythm of your site. The value of a rhythm unit should be the line-height of your body text. Here’s why.

节奏单位是您网站的垂直节奏所使用的基本倍数。 节奏单位的值应为正文的行高。 这就是为什么 。

/* One rhythm unit would be 20px * 1.4 = 28px */ html {   font-size: 20px;   line-height: 1.4; }

p {   margin: 28px; }

Calculating the rhythm unit becomes easier if you use relative units (and you should). One rhythm unit will always be equal to the root font-size times the line-height of your body text.

如果使用相对单位( 并且应该使用 )，则计算节奏单位将变得更加容易。 一个节奏单位将始终等于根字体大小乘以正文文本的行高。

/* 1 rhythm unit, calculated with rem */ html {   line-height: 1.4; }

p {   margin: 1.4rem; }

When you create whitespace, feel free to vary the number of rhythm units. You can even include non-integer values.

创建空白时，请随时更改节奏单位的数量。 您甚至可以包含非整数值 。

/* 2 rhythm units */ h2 {   margin-top: 2.8rem;}

/* 0.75 rhythm units */ p {   margin-top: 1.05rem;}

为什么要在不同的视口中更改“垂直节奏”？ (Why change Vertical Rhythm at different viewports?)

We tend to place larger devices (like desktops) farther away than smaller devices (like phones). We need to increase font-size to compensate for the loss in readability due to the increased distance. If your user can’t read your site comfortably, they’ll likely leave, they’ll squint their eyes, or increase their browser’s front-size (if they’re savvy enough).

我们倾向于将较大的设备(例如台式机)放置在比较小的设备(例如电话)更远的地方。 我们需要增加字体大小，以补偿由于距离增加而导致的可读性损失。 如果您的用户不能舒适地阅读您的网站，他们可能会离开，他们会quin起眼睛，或者增加浏览器的前端尺寸(如果足够聪明的话)。

关于可读性的更多内容。 (A little more on readability.)

Readability is one of the most important elements to web typography. It’s affected by three values — the font-size, line-height (or leading), and line-length (or measure) of your text. When one element changes, others may need to change to preserve readability.

可读性是网络排版的最重要元素之一。 它受三个值的影响—文本的字体大小，行高(或行距)和行长(或度量) 。 当一个元素更改时，其他元素可能需要更改以保持可读性。

When you resize a browser from a mobile view to a desktop view, you’ll notice that both measure and font-size change. As a result, leading should change too. This concept is so important that Tim Brown came up with the Molten leading approach. One example of molten leading in use is where you write your body line-height with viewport units.

在将浏览器的大小从移动视图调整为桌面视图时，您会注意到测量和字体大小都会改变。 结果，领导也应该改变。 这个概念非常重要，以至于蒂姆·布朗提出了Molten领导方法。 使用熔融引线的一个示例是，您使用视口单位编写身体线条的高度。

/* This is a simple example. See the complete example in the link above */ body {   font-size: calc(1em + 1vw);   line-height: calc(1.2em + 1vw); }

But the problem is, when you change the line-height of your body text, the Vertical Rhythm unit changes. There’s no way to incorporate Molten leading with Vertical Rhythm.

但是问题是，当您更改正文文本的行高时，“垂直节奏”单位也会更改。 没有办法将“熔融节奏”与“垂直节奏”结合在一起。

Now, even if you discarded molten leading and used the standard unitless line-heights, you’ll probably still go insane from the amount of duplication you need to create. Not worth the effort.

现在，即使您丢弃了熔化的引线并使用了标准的无单位行高，您可能仍然会因需要创建的重复数量而发疯。 不值得的努力。

/* Change line height at different breakpoints */ html {   line-height: 1.4; }

@media (min-width: 600px) {   html {     line-height: 1.5;   } }

/* Calculate rhythm again at each breakpoint */ p {  margin-top: 1.4rem; }

@media (min-width: 600px) {   p {     line-height: 1.5rem;   } }

使用CSS自定义属性更改节奏单位 (Changing the rhythm unit with CSS Custom Properties)

CSS Custom properties (better known as CSS variables) can be used to create a rhythm unit that changes at different viewports.

CSS自定义属性(俗称CSS变量)可用于创建在不同视口变化的节奏单元。

To create a CSS variable, you create a custom property (hence it’s name) by prepending -- to a property.

要创建一个CSS变量，通过预先创建一个自定义属性(因此它的名字) --一个属性。

:root {   --color: red; }

To use a custom property you created, you write var(--your-custom-property).

要使用您创建的自定义属性，请编写var(--your-custom-property) 。

p {   color: var(--color) }

The great thing about CSS Custom Properties is: they can be updated dynamically within different media queries.

CSS自定义属性的妙处在于：它们可以在不同的媒体查询中动态更新。

:root {   --color: red; }

@media (min-width: 30em) {   :root {     --color: blue;   } }

p {   color: var(--color) }

That means you can create a --baseline property that correspond to one rhythm unit, then, use this --baseline property across your CSS to create responsive Vertical Rhythm.

这意味着您可以创建与一个节奏单位相对应的--baseline属性，然后在CSS中使用此--baseline属性来创建响应性的Vertical Rhythm。

:root {  --baseline: 1.4;   line-height: var(--baseline) }

@media (min-width: 30em) {   :root {     /* a value of 3 used here to exaggerate the changes so you can see it in the demo below */   --baseline: 3;   } }

To create rhythm values, you need to use CSS Calc (because you can only calculate stuff in CSS with CSS Calc).

要创建节奏值，您需要使用CSS Calc(因为您只能使用CSS Calc计算CSS中的内容)。

/* Two rhythm units */ h2 {   margin-top: calc(var(--baseline) * 2rem); }

/* 0.75 rhythm units */ p {   margin-top: calc(var(--baseline) * 0.75rem); }

通过函数简化计算 (Simplifying the calculation with a function)

It can be a chore to write calc and var every time you create a rhythm value. You can simplify the calculation if you create a function in a preprocessor like Sass.

每次创建节奏值时，都要写calc和var可能很麻烦。 如果在像Sass这样的预处理器中创建函数，则可以简化计算。

// rvr stands for responsive vertical rhythm @function rvr($multiple) {   @return calc(var(--baseline) * $multiple * 1rem); }

Then, you can use the vr function you’ve created like this. Much simpler! ?.

然后，您可以使用这样创建的vr函数。 简单得多！ ？

/* Two rhythm units */ h2 { margin-top: rvr(2); }

/* 0.75 rhythm units */ p { margin-top: rvr(0.75); }

支持看起来如何？ (How does the support look?)

Support for both CSS Custom Properties and CSS Calc is awesome. They’re supported in all major browsers today.

对CSS自定义属性和CSS Calc的支持都很棒。 当今所有主流浏览器都支持它们。

Unfortunately, support for both CSS Calc and CSS Custom is lacking in Opera Mini (along with some lesser known browsers like QQ and Baidu), which is a bummer.

不幸的是，Opera Mini(以及一些鲜为人知的浏览器，例如QQ和百度)缺乏对CSS Calc和CSS Custom的支持，这实在令人um目结舌。

Since Opera Mini doesn’t support CSS Calc and CSS Custom properties, we need to provide fallback properties each time we create a rhythm unit. This is slightly more work, but luckily, not a deal breaker.

由于Opera Mini不支持CSS Calc和CSS Custom属性，因此每次创建节奏单元时，我们都需要提供后备属性。 这还需要更多工作，但幸运的是，这不是破坏交易的方法。

:root {   --baseline: 1.4;   /* Line-height fallback */   line-height: 1.4;   line-height: calc(var(--baseline) * 1); }

@media (min-width: 30em) {   :root {     --baseline: 1.5;   } }

p {   /* Line-height basic vertical rhythm fallback. */   margin-top: 1.05rem;   margin-top: rvr(0.75); }

To make it simpler, you can also create a vr function that calculates Vertical rhythm based on the base line-height value. Here’s a simple version you can use (specifically for this example). If you’d like a more complete version, check out Typi, which is a library I’ve made to help make responsive typography simpler.

为简化起见，您还可以创建一个vr函数，该函数基于基线的线高值计算“垂直”节奏。 这是您可以使用的简单版本(此示例专用)。 如果您想要一个更完整的版本，请查看Typi ，这是我用来帮助简化响应式排版的库。

@function vr($multiple) {   @return 1.4 * $multiple * 1rem; }

If you create the vr function, your rhythm fallback would be simpler:

如果创建vr函数，则节奏后退会更简单：

p {   /* Line-height basic vertical rhythm fallback. */   margin-top: vr(0.75);   margin-top: rvr(0.75); }

Note: I’ve yet to include responsive vertical rhythm in Typi yet. I hope to add it when I get some time on my hands.

注意：我还没有在Typi中加入响应性的垂直节奏。 我希望在有空的时候添加它。

结语 (Wrapping up)

Vertical Rhythm is an important typography principle we should pay attention to as designs and developers. Unfortunately, we couldn’t give it as much attention as we wanted to before because we lacked the tools to do so.

垂直节奏是设计和开发人员应注意的重要排版原则。 不幸的是，我们无法像以前那样给予足够的重视，因为我们缺乏这样做的工具。

But now, we can create responsive vertical rhythm with the help of CSS Custom Properties and CSS Calc. If you create responsive vertical rhythm, make sure you provide fallback for browsers that don’t support either CSS Custom Properties and CSS Calc!

但是现在，我们可以借助CSS自定义属性和CSS Calc创建响应性的垂直节奏。 如果您创建响应性的垂直节奏，请确保为不支持CSS自定义属性和CSS Calc的浏览器提供后备功能！

Thanks for reading. Did this article help you in any way? If I did, I hope you consider sharing it; you might just help someone who felt the same way you did before reading the article. Thank you.

谢谢阅读。 本文对您有任何帮助吗？ 如果我做到了， 我希望你考虑分享它 ； 您可能只是帮助与您在阅读本文之前一样的人。 谢谢。

Originally published at zellwk.com.

最初在zellwk.com上发布。

翻译自: https://www.freecodecamp.org/news/how-to-make-vertical-rhythm-responsive-with-css-variables-and-css-calc-dfeec0bd1660/

css calc 变量