响应式布局不改变文字排版_我对Web响应式排版的一切了解

响应式布局不改变文字排版

Responsive typography is a tough nut to crack. This was the best method I could come up with when I first started creating responsive websites:

响应式排版是一个难以克服的难题。 这是我刚开始创建响应式网站时可以想到的最好方法：

p {
  font-size: 16px;
}

@media (min-width: 800px) {
  p {
    font-size: 18px;
  }
}

/* Repeat for h1 - h6 and other type groups */

I’ve learned a lot more about typography since then and picked up best practices like using relative units, vertical rhythms and meaningful typography scales.

从那时起，我对印刷术有了更多的了解，并掌握了最佳实践，例如使用相对单位，垂直节奏和有意义的印刷尺度。

These new practices were wonderful. They made my websites look more pleasing to the eye. Implementing them, however, was a horrible experience.

这些新做法很棒。 他们使我的网站看起来更令人赏心悦目。 但是，实施它们是一种可怕的经历。

I had to write complex code and I found myself struggling to create responsive websites under tremendous time pressure.

我不得不编写复杂的代码，我发现自己在巨大的时间压力下努力创建响应式网站。

Now, after months of hacking, I’ve finally created a solution that I’m happy to share with you. It’s called Typi.

现在，经过数月的黑客入侵，我终于创建了一个解决方案，很高兴与您分享。 它叫Typi。

Typi is great because it allows me to use the practices I’ve learned, and at the same time solves most of the problems I’ve encountered in 3 simple steps. Let me explain these three steps by walking you through the practices I use when working with responsive typography.

Typi很棒，因为它使我能够使用所学的实践，并同时通过3个简单的步骤解决了我遇到的大多数问题。 让我通过逐步介绍我在使用响应式排版时使用的实践来解释这三个步骤。

练习1：随着屏幕尺寸的增加，增加正文副本的字体大小和行高。 (Practice 1: Increase font-size and line-height of your body copy as screen sizes increase.)

Reading on the mobile vs the desktop are two completely different experiences. You undoubtedly hold your device closer to you when you read on the mobile since the screen is smaller.

在手机和台式机上阅读是两种完全不同的体验。 毫无疑问，由于屏幕较小，在手机上阅读时，您可以将设备靠近自己。

Your desktop screen will be further away from you compared to the mobile. Hence, the same font-size on the desktop looks slightly smaller due to the further distance.

与移动设备相比，您的桌面屏幕离您更远。 因此，由于距离较远，桌面上相同的字体大小看起来会略小。

To increase readability and compensate for the loss in size due to distance, we increase the font size.

为了增加可读性并补偿由于距离引起的尺寸损失，我们增加了字体大小。

I first got to know of this practice through the responsive typography basics post on ia.net. I highly suggest checking the post out if you’re unfamiliar with what I’m talking about.

我首先通过ia.net上的响应式印刷基础知识了解了这种做法。 如果您不了解我在说什么，我强烈建议您查看该帖子。

An implementation of this practice in Sass can be this:

在Sass中这种实践的实现可以是：

html {
  font-size: 16px;
  
  @media (min-width: 800px) {
    font-size: 18px;
  }
  
  @media (min-width: 1200px) {
    font-size: 20px;
  }
}

Note: as we increase font sizes, we might also need to increase the line height to allow more breathing room between lines of text. With Sass, this can look like:

注意：随着字体大小的增加，我们可能还需要增加行高，以在文本行之间留出更多的呼吸空间。 使用Sass，这看起来像：

html {
  font-size: 16px;
  line-height: 1.3;
    
  @media (min-width: 800px) {
    font-size: 18px;
  }
    
  @media (min-width: 1200px) {
    font-size: 20px;
    line-height: 1.4;
  }
}

练习2：对您的排版使用模块化比例尺 (Practice 2: Use a modular scale for your typography)

It’s difficult to pick the font-size of your typographic elements (<h1> to <h6>), especially if you’re trying to pull them out of thin air. A modular scale, also called typography scale, is a tool you can use to help you pick good typography sizes that flow well with the rest of your page.

很难选择印刷元素的字体大小(<h1>至<h6>)，尤其是当您试图将它们从空中拉出来时。 模块化比例尺(也称为印刷比例尺)是一种工具，可用于帮助您选择与页面其余部分配合良好的良好印刷尺寸。

It is a sequence of numbers related to each other through a ratio (a number). It can be created by multiplying (or dividing) the font-size of your body copy with the ratio. The resultant number is then multiplied (or divided) again with the ratio.

它是通过比率(数字)相互关联的数字序列。 可以通过将正文副本的字体大小乘以(或除以该比率)来创建它。 然后将结果数再乘以(或除以)该比率。

An implementation of modular scale at work with the above scale can be this:

与上述规模一起使用的模块化规模的实现可以是：

html { font-size: 16px }
h1 { font-size: 50px }
h2 { font-size: 37px }
h3 { font-size: 28px }
// ...

Of course, it’s not going to be so simple. If you remember the first practice we discussed earlier in this article, you’ll notice that the body font-size should change as your screen width changes.

当然，它不会那么简单。 如果您还记得我们在本文前面讨论的第一种做法，您会注意到，随着屏幕宽度的变化，主体字体大小也应随之变化。

This becomes a problem when you have to change the typography sizes of all your elements at every breakpoint to ensure the scale stays consistent.

当您必须在每个断点处更改所有元素的字体大小以确保比例尺保持一致时，这将成为一个问题。

html {
  font-size: 16px;
  line-height: 1.3;
  @media (min-width: 800px) {
    font-size: 18px;
  }
    
  @media (min-width: 1200px) {
    font-size: 20px;
    line-height: 1.4;
  }
}

h1 {
  font-size: 50px;
  @media (min-width: 800px) {
    font-size: 56px;
  }
  @media (min-width: 1200px) {
    font-size: 63px;
  }
}

h2 {
  font-size: 37px;
  @media (min-width: 800px) {
    font-size: 42px;
  }
  @media (min-width: 1200px) {
    font-size: 47px;
  }
}

h2 {
  font-size: 28px;
  @media (min-width: 800px) {
    font-size: 32px;
  }
  @media (min-width: 1200px) {
    font-size: 35px;
  }
}
// ...

Ugh.

啊。

The solution? Check out the next practice.

解决方案？ 查看下一个练习。

Note: If you need help with choosing your starting font-size and ratio for your modular scale, I suggest reading this article on meaningful typography by Tim Brown.

注意：如果您需要有关为模块缩放比例选择起始字体大小和比例的帮助，我建议您阅读有关 Tim Brown 有意义的字体的本文 。

练习3：使用相对的印刷单位 (Practice 3: Use relative typography units)

Relative units in CSS are percentages (%), viewport units (vh, vw, vmin, vmax) , the em unit (em) and the rem unit (rem). The ones commonly used to size typography are em and rem.

CSS中的相对单位是百分比(％)，视口单位(vh，vw，vmin，vmax)，em单位(em)和rem单位(rem)。 常用的字体排版是em和rem 。

You can use both em and rem in the same manner to solve the problem we encountered in practice 2. To convert pixels into em, we take the target font-size and divide it against the base-font size.

您可以以相同的方式使用em和rem来解决我们在练习2中遇到的问题。要将像素转换为em，我们采用目标字体大小并将其除以基本字体大小。

Here’s how it would look:

外观如下：

html {
  font-size: 16px;
  @media (min-width: 800px) {
    font-size: 18px;
  }
  @media (min-width: 1200px) {
    font-size: 20px;
  }
}

h1 { font-size: 3.125em; } // 50 ÷ 16 = 3.125
h2 { font-size: 2.3125em;} // 37 ÷ 16 = 2.3125
h3 { font-size: 1.75em; } // 28 ÷ 16 = 1.75
// ...

// Note: These are approximate values.
// The actual values derived from modularscale.com are 3.129em, 2.3353em and 1.769em respectively.

Much better now!

现在好多了！

There are a few more problems. Notice how <h1> becomes approximately 63px as the screen width increases to 1200px.

还有其他一些问题。 请注意，随着屏幕宽度增加到1200px，<h1>如何变为大约63px。

63px is pretty large. Reading the <h1> text starts to get uncomfortable already. A better decision might be to tone it down to 47px instead (size of <h2>).

63px非常大。 读取<h1>文本已经开始变得不舒服。 更好的决定可能是将其调低到47px(<h2>的大小)。

When this happens, you might want to decrease the size of the <h2>element since it’s a good practice to emphasize the <h1> element. Sometimes, you might also need to change the line-height as well.

发生这种情况时，您可能希望减小<h2>元素的大小，因为强调<h1>元素是一种好习惯。 有时，您可能还需要更改行高。

The code then becomes…

然后代码变成…

html {
  font-size: 16px;
  @media (min-width: 800px) {
    font-size: 18px;
  }
  @media (min-width: 1200px) {
    font-size: 20px;
  }
}

h1 {
  font-size: 3.129em;
  line-height: 1.2;
  @media (min-width: 1200px) {
    font-size: 2.3353em;   
    line-height: 1.3;
  }
}

h2 {
  font-size: 2.3353em;
  @media (min-width: 1200px) {
    font-size: 1.769em;   
  }
}

h3 {
  font-size: 1.769em;
  @media (min-width: 1200px) {
    font-size: 1.33em;
  }
}

// ...

Ugh. Back to square one :(

啊。 回到原点 ：(

This is where Typi comes in. Let’s take a break from the practices and see how Typi can help you.

这就是Typi的用武之地。让我们从实践中休息一下，看看Typi如何为您提供帮助。

使用Typi (Using Typi)

Typi is a Sass library that allows you to set the font-size and line-height properties of all your typographic elements in separate Sass maps. These maps can then be used to output the code we see in the above situation. Here’s how it works.

Typi是一个Sass库，允许您在单独的Sass映射中设置所有印刷元素的字体大小和行高属性。 然后，这些映射可用于输出在上述情况下看到的代码。 运作方式如下。

First, you need to setup a $typi map. It looks like this:

首先，您需要设置一个$ typi地图。 看起来像这样：

$typi: (
  null: 16px,
  small: 18px,
  large: 20px
);

null, small and large are breakpoints.

null，small和large是断点。

Typi automatically looks for a $breakpoints map to create your media queries (which means it can integrate perfectly with mappy-breakpoints, a library I created to help with media queries).

Typi会自动寻找$ breakpoints映射来创建您的媒体查询(这意味着它可以与mappy-breakpoints完美集成， 后者是我创建的可帮助媒体查询的库)。

$breakpoints: (
  small: 800px,
  large: 1200px
);

Once the $typi map is set up, we call the typi-base() mixin within the html selector.

设置$ typi映射后，我们将在html选择器中调用typi-base()mixin。

html {
  @include typi-base();
}

This typi-base() mixin creates the same styles we wrote for the <html> tag in Practice 2. The only difference is that the font-sizes are stated in percentages.

此typi-base()混合创建的样式与我们在练习2中为<html>标记编写的样式相同。唯一的区别是字体大小以百分比表示。

html {
  font-size: 100%; /* This means 16px */
}

@media all and (min-width: 800px) {
  html {
    font-size: 112.5%; /* This means 18px */
  }
}

@media all and (min-width: 1200px) {
  html {
    font-size: 125%; /* This means 20px */
  }
}

We also mentioned that there might be a need to change line-height values as the font-size changes. You can change line-height values easily in Typi by providing a second line-height value to each breakpoint that requires it:

我们还提到，随着字体大小的更改，可能需要更改行高值。 您可以在Typi中轻松更改线高值，方法是为每个需要它的断点提供第二个线高值：

$typi: (
  null: (16px, 1.3), // Sets line-height to 1.3
  small: 18px,
  large: (20px, 1.4) // Sets line-height to 1.4
);

The resultant CSS from our updated $typi map is:

我们更新后的$ typi映射生成CSS为：

html {
  font-size: 100%; /* This means 16px */
  line-height: 1.3;
}

@media all and (min-width: 800px) {
  html {
    font-size: 112.5%; /* This means 18px */
  }
}

@media all and (min-width: 1200px) {
  html {
    font-size: 125%; /* This means 20px */
    line-height: 1.4;
  }
}

After creating the $typi map, we can create other font-maps using the same format. Here’s an example:

创建$ typi映射后，我们可以使用相同格式创建其他字体映射。 这是一个例子：

$h1-map: (
  null: (3.129em, 1.2),
  large: (2.3353em, 1.3)
  );

$h2-map: (
  null: 2.3353em,
  large: 1.769em
  );

$h3-map: (
  null: 1.769em,
  large: 1.333em
  );
// ...

Then, we call each of these font-maps using the typi mixin:

然后，我们使用typi mixin调用这些字体映射：

h1 { @include typi($h1-map) }
h2 { @include typi($h2-map) }
h3 { @include typi($h3-map) }
// ...

The resultant CSS would be:

结果CSS将是：

h1 {
  font-size: 3.129em;
  line-height: 1.2;
}

@media (min-width: 1200px) {
  h1 {
    font-size: 2.3353em;
    line-height: 1.3;
  }
}

h2 {
  font-size: 2.3353em;
}

@media (min-width: 1200px) {
  h2 {
    font-size: 1.769em;
  }
}

h3 {
  font-size: 1.769em;
}

@media (min-width: 1200px) {
  h3 {
    font-size: 1.333em;
  }
}

Pretty neat huh? You’ll have to download Typi to play with it. (It’s not available on Sassmeister or Codepen yet)

相当整洁吧？ 您必须下载Typi才能使用。 (尚无法在Sassmeister或Codepen上使用)

PROTIP: You can use the modular scale Sass mixin if you don’t want to write exact em values (like 1.769em) across different font maps.

提示 ：如果您不想跨不同的字体映射写入精确的em值(如1.769em)，则可以使用模块化比例Sass mixin。

To do so, you have to download the library and import it into your Sass file. Then, change the font maps such that it uses the ms() function.

为此，您必须下载该库并将其导入到Sass文件中。 然后，更改字体映射，使其使用ms()函数。

$h1-map: (
  null: (ms(4) 1.2),
  large: (ms(3), 1.3)
  );

$h2-map: (
  null: ms(3),
  large: ms(2)
  );

$h3-map: (
  null: ms(2),
  large: ms(1)
  );
// ...

So, in a nutshell, Typi makes responsive typography easier by helping you write font-size and line-height properties at different breakpoints`.

简而言之， Typi通过帮助您在不同的断点处写出font-size和line-height属性，使响应式排版变得更加容易。

Now that I’m done introducing you to Typi, let’s move on and talk about the final two practices (and some problems that I have yet to find a solution for).

现在我已经向您介绍了Typi，让我们继续讨论最后的两种做法(以及一些我尚未找到解决方案的问题)。

练习4：应用垂直节奏 (Practice 4: Apply vertical rhythms)

Vertical Rhythms is a concept from print design, where we keep vertical spaces between elements on a page consistent (and relative) to each other. The idea is similar to using a typography scale — to allow elements on your page to flow well.

垂直节奏是印刷设计中的一个概念，在此设计中，我们使页面上元素之间的垂直间距彼此保持一致(相对)。 这个想法类似于使用印刷比例尺-允许页面上的元素流畅地流动。

In practice, we often use the line-height property of the body copy as the base for a consistent vertical rhythm. Let’s say the body copy of your website has line-height of 25px. You’ll do two things:

实际上，我们经常使用主体副本的line-height属性作为一致的垂直节奏的基础。 假设您网站的正文副本的行高为25px 。 您将做两件事：

1. Set the vertical white space between elements to a multiple of 25px

   将元素之间的垂直空白设置为25px的倍数

2. Set the line-height of all text elements to a multiple of 25px

   将所有文本元素的行高设置为25px的倍数

This is how it might look like in CSS (Note: This hasn’t taken the three practices I mentioned above into account yet)

这就是CSS中的样子(注意：这还没有考虑到我上面提到的三种做法)

html {
  font-size: 18px;
  line-height: 25px;
}

// Resets margins
body, h1, p {
  margin: 0;
}

h1 {
  font-size: 63px;
  line-height: 75px;
  margin: 25px 0;
}

p + p {
  margin-top: 25px;
}

Looks pretty good! Let’s take it a step further by changing the code above into relative units. While doing so, you’ll encounter the great em vs rem debate.

看起来还不错！ 通过将上面的代码更改为相对单位，让我们更进一步。 这样做时，您会遇到关于em与rem的激烈辩论。

埃姆vs雷姆 (Em vs Rem)

Let’s try converting the code first into ems, then rems. By the way, the best practices states that line-height values should be unitless.

让我们先将代码转换为ems ，然后转换为rems 。 顺便说一句， 最佳实践指出线高值应该是无单位的 。

html {
  font-size: 1.125em;
  line-height: 1.4; // This is 25.2px to be accurate
}

// Resets margins
body, h1, p {
  margin: 0;
}

h1 {
  // font size is 63.147px to be more precise
  font-size: 3.5082em; // 63.147 ÷ 18 = 3.5082em
  line-height: 1.1972; // 75.6 ÷ 63.147 =  1.1972
  margin: 0.3991em 0; // 25.2 ÷ 63.147 = 0.3991
}

p + p {
  margin-top: 1.4em;
}

Pay special attention to how we converted the margin property on the <h1> element into ems.

请特别注意如何将<h1>元素上的margin属性转换为ems。

Notice how we used 63.147px as the base for the division? This must be done because sizes calculated with ems are relative to it’s current font-size. It often causes confusion and involves a lot of complex math.

注意我们如何使用63.147px作为除法的基础？ 之所以必须这样做，是因为用ems计算的大小是相对于其当前font-size的 。 它经常引起混乱，并且涉及很多复杂的数学运算。

Now, here’s the kicker. Even though we tried to be as accurate as we can be, browsers don’t seem to cooperate with us. You’ll notice that our vertical rhythms start getting screwy.

现在，这是踢球者。 即使我们尽力做到尽可能准确，但浏览器似乎并没有与我们合作。 您会注意到我们的垂直节奏开始变得混乱。

Two problems contributed to this screwy behavior.

导致此错误行为的原因有两个。

First, we’re not 100% precise and accurate with our math. We could get more precise (like 10 decimal places), but that would make our code ugly as hell.

首先，我们的数学不是100％精确。 我们可以得到更精确的精度(例如小数点后10位)，但这会使我们的代码变得丑陋无比。

Second, different browsers handle subpixel rounding issues differently. This means we’ll never be able to get pixel-perfect rhythms no matter how hard we try.

其次，不同的浏览器以不同的方式处理亚像素舍入问题。 这意味着无论我们如何努力，我们将永远无法获得完美的像素节奏。

Well, I don’t want to harp on subpixel rounding because there’s nothing much we can do. Let’s take a look at how the rem unit handles this complex math instead, shall we?

好吧，我不想在亚像素舍入上竖琴，因为我们无能为力。 让我们看看rem单元如何处理这个复杂的数学，对吗？

html {
  font-size: 1.125rem;
  line-height: 1.4; // This is 25.2px to be accurate
}

// Resets margins
body, h1, p {
  margin: 0;
}

h1 {
  font-size: 3.5082rem; // 63.147 ÷ 18 = 3.5082
  line-height: 1.1972; // 75.6 ÷ 63.147 = 1.1972
  margin: 1.4rem 0; // 25.2 ÷ 18 = 1.4
}

p + p {
  margin-top: 1.4rem;
}

Notice how we used 1.4rem on the margin property instead of 0.3991em? The rem unit makes calculations with vertical rhythms much simpler.

注意我们如何在margin属性上使用1.4rem而不是0.3991em？ rem单元使垂直节奏的计算 变得更加简单 。

This doesn’t mean you should switch blindly to the rem unit though. Rems and em units are both useful, and they should be used for different purposes. I’ll write about this topic another day. For now, let’s come back to vertical rhythms.

但这并不意味着您应该盲目切换到rem单元 。 Rems和em单位都是有用的，应将它们用于不同的目的。 我有一天会写关于这个话题的。 现在，让我们回到垂直节奏。

Now that we’ve converted our vertical rhythms into relative units, let’s take a look at how it fares when we combine it with practice one (font-sizes and line-heights should change when screen sizes change).

现在，我们已经将垂直节奏转换为相对单位，让我们看一下将其与练习一结合时的表现(当屏幕尺寸改变时，字体大小和行高也会改变)。

We’re going to keep this example as simple as possible by using only one media-query. We’re also going to use the rem unit.

我们将通过仅使用一个媒体查询来使此示例尽可能简单。 我们还将使用rem单元。

html {
  font-size: 1.125em;
  line-height: 1.4;
    
  @media (min-width: 1200px) {
    font-size: 1.25em; // this is 20px
    // Slight change in line heights at 1200px
    line-height: 1.45 // this is 29px
  }
}

// Resets margins
body, h1, p {
  margin: 0;
}

h1 {
  font-size: 3.5082em;
  line-height: 1.1972;
  margin: 1.45rem 0;
    
  @media (min-width: 1200px) {
    // font-size is now 70.164px
    line-height: 1.24; // 29px * 3 ÷ 70.164 = 1.24
    margin: 1.45rem 0;
  }
}

p + p {
  margin-top: 1.4em;
  @media (min-width: 1200px) {
    margin-top: 1.45em
  }
}

Ugh. We might have to add 20,000 media queries to change margin and line-height of all our elements with just this one change in the line-height property on <html>. We haven’t even talked about padding or border properties yet!

啊。 我们可能必须添加20,000个媒体查询才能更改所有元素的边距和行高，而<html>的line-height属性中只有这一更改。 我们甚至还没有讨论padding或border属性！

(╯°□°)╯︵┻━┻ ((╯°□°)╯︵ ┻━┻)

So, here’s what I realized. It’s impossible to apply perfect responsive vertical rhythms across different browsers. At least not with the current technology.

所以，这就是我意识到的。 无法在不同的浏览器上应用完美的响应式垂直节奏 。 至少不是目前的技术。

What we can do instead is:

我们可以做的是：

1. We can make do with line-height properties of major typographic elements by eyeballing and using Typi.
   我们可以通过目测和使用Typi来处理主要印刷元素的行高属性。

2. Try not to change the line-height property of your body copy if you can. Things will become easier when CSS variables are finally supported in all major browsers.

   如果可以，请尽量不要更改正文的line-height属性。 当所有主流浏览器最终都支持CSS变量时，事情将变得更加容易。

练习5：将文字尺寸保持在45-75个字符之间 (Practice 5: Keep text measures between 45–75 characters)

Oh, this one is easy. Just remember this: one character is approximately 0.5em. A text measure between 45–75 characters means the width of your text element must be between 22.5em and 37.5em.

哦，这很容易。 请记住这一点：一个字符大约为0.5em。 介于45–75个字符之间的文本尺寸表示文本元素的宽度必须在22.5em和37.5em之间。

From experience, I’m mostly concerned about text overflowing 75 characters. If your text goes below 45 characters, maybe it’s time to have a change of font sizes.

根据经验，我最关心的是文本溢出75个字符。 如果您的文字少于45个字符，也许是时候更改字体大小了。

article {
  max-width: 30em;
  /* Anywhere between 22.5em to 37.5em. Use your discretion */
}

结语 (Wrapping Up)

Responsive typography is hard. There are still no perfect answers we can rely on, but let’s try to make do for now.

响应式排版很难。 我们仍然没有完美的答案可以依靠，但是让我们暂时尝试一下。

By the way, here’s the link to Typi again if you want to play with it.

顺便说一句，如果您想玩的话，这里是再次指向Typi的链接。

This article first appeared on my blog at www.zell-weekeat.com. Check it out if you want more articles like this

这篇文章首先出现在我的博客www.zell-weekeat.com上 。 如果您想要更多这样的文章，请查看

翻译自: https://www.freecodecamp.org/news/everything-i-know-about-responsive-web-typography-c774c2138f5c/

响应式布局不改变文字排版