CSS单位之战：EM与。 REMs ...打架！？

最新推荐文章于 2024-07-12 20:49:16 发布

cumi6497

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量408

点赞数

文章标签： css python 编程语言 html java

原文链接：https://www.freecodecamp.org/news/em-units-versus-rem-units-fight-382c16af8a67/

版权

by ZAYDEK

由ZAYDEK

tl; dr不要只是使用px (tl;dr don’t just use px)

CSS单位之战：EM与。 REMs ...打架！？ (CSS Unit Battle: EMs Vs. REMs…FIGHT! ?)

“两个单位进入！一个单位离开……” – ThunderDOM (“Two units enter! One unit leaves…” –ThunderDOM)

Before I get to the article, I just want to share that I’m building a product, and I would love to collect some data about how to better serve web developers. I created a short questionnaire to check out before or after reading this article. Please check it out — thanks! And now, back to our regular scheduled programming.

在开始阅读本文之前，我只想分享我正在开发的产品，并且我希望收集一些有关如何更好地为Web开发人员提供服务的数据。在阅读本文之前或之后，我创建了一个简短的问卷调查表以进行检查。请检查一下-谢谢！现在，回到我们的常规计划编程。

I’m collecting some data about what web developers need from web-based education tools, and I’d love to get your answers. In the description for each question, I’ve included my own answers so you can get to know me better, too! There’s ~15 questions ? https://t.co/qvGU3dF0DB.
— username[ZAYDEK] (@username_ZAYDEK)
我正在从基于Web的教育工具中收集有关Web开发人员需求的一些数据，我很乐意得到您的答案。在每个问题的描述中，我都包含了自己的答案，因此您也可以更好地了解我！有〜15个问题？ https://t.co/qvGU3dF0DB 。
—用户名[ZAYDEK](@username_ZAYDEK)
March 8, 2019

三月8，2019

Who would win in a FIGHT?
— username[ZAYDEK] (@username_ZAYDEK)
谁将会赢得这场斗争？
—用户名[ZAYDEK](@username_ZAYDEK)
April 13, 2018

2018年4月13日

Hi! ? I’m Zaydek, and I’m here to give a hand in learning HTML and CSS. In this article, we’ll explore the difference between the “em” and “rem” units, and derive understanding from first principles.

嗨！？我是Zaydek，在这里帮助学习HTML和CSS。在本文中，我们将探讨“ em”和“ rem”单元之间的区别，并从第一原理中获得理解。

When I first learned HTML and CSS, it was a world of pain because I misunderstood the basics. Having learned me some web, I’d like to share some insight and encouragement because it can be easier than you imagine.

当我第一次学习HTML和CSS时，这是一个痛苦的世界，因为我误解了基础知识。了解了一些网络知识后，我想分享一些见解和鼓励，因为它比您想象的要容易。

我还在Scrimba上教授了免费HTML / CSS课程，在该课程中，我教如何从头开始构建漂亮的博客。点击这里报名！？ (I also taught a free HTML/CSS course on Scrimba where I teach how to build a beautiful blog from scratch. Click here to enroll! ?)

Scrimba.com是一个交互式前端平台，在该平台上，网站被记录为事件，而不是视频，并且可以被编辑！？ (Scrimba.com is an interactive front-end platform where websites are recorded as events — not videos — and can be edited! ?)

电磁单元 (The em unit)

Em has an interesting etymology. em unsuspectingly stands for “M”.

Em有一个有趣的词源。毫无疑问， em代表“ M”。

This seems recursive, doesn’t it? How can em be self-referencing? It’s so cunning… so subtle. Well em—as we know it in CSS—does not represent the “m” character, but a relationship with its parent’s font-size.

这似乎是递归的，不是吗？ em如何进行自我参照？真是太狡猾了……太微妙了。嗯，正如我们在CSS中所知道的，em并不代表“ m”字符，而是与其父代的font-size 。

Say we define:

说我们定义：

<!DOCTYPE html>
<html>
    <head>
        …
        <style>
            
.a { font-size: 40px; }
.b { font-size: 30px; }
            
        </style>
    </head>
    <body>
        <div class="wrapper">
            <span class="a"></span>
            <span class="b"></span>
        </div>
    </body>
</html>

Here we’ve defined a wrapper with two span elements, each with no content. So our website is terrible! But what we can do is give our span elements some text to demonstrate how em works:

在这里，我们定义了一个包含两个span元素的wrapper ，每个都不包含任何内容。所以我们的网站太糟糕了！但是我们可以做的是给我们的span元素一些文本来演示em工作原理：

…
    <body>
        <div class="wrapper">
            <span class="a">hello from inside .a</span>
            <span class="b">hello from inside .b</span>
        </div>
    </body>
    …

We’ve just added text to our span elements. And the text renders at different sizes, 40px and 30px. Let’s set the wrapper font-size to 20px, and then refactor our .a and .b font-size using em.

我们刚刚在span元素中添加了文本。文本呈现为40px和30px不同大小。让我们将wrapper font-size为20px ，然后使用em重构我们的.a和.b font-size 。

…
        <style>
.wrapper { font-size: 20px; }
.a { font-size: 1.5em; }
.b { font-size: 2.0em; }
        </style>
        …

What? Our paragraphs’ font-size has flipped! Now we can begin to explore how em works. Had we defined font-size as 20px, 1em would mean 1 * 20px. So 1em is sort of meaningless.

什么？我们段落的font-size已翻转！现在我们可以开始研究em工作原理。如果我们将font-size定义为20px ，则1em表示1 * 20px 。所以1em毫无意义。

However in our CSS, we defined .a font-size as 1.5em and .b font-size as 2.0em. Given that their parent is 20px, these expressions therefore evaluate to 30px and 40px . So, the opposite!

但是在CSS中，我们将.a font-size定义为1.5em ，将.b font-size为2.0em 。假设其父级为20px ，则这些表达式的计算结果分别为30px和40px 。所以，相反！

There is an objection to using em.Had we defined multiple parents, such as elements inside of elements, each with their own em defined font-size, it becomes unintuitive to determine what the child’s font-size is.

有反对使用 em. 如果我们定义了多个父元素，例如元素内部的元素，每个元素都有自己的em定义的font-size ，则确定孩子的font-size是什么就不那么直观了。

雷姆单位 (The rem unit)

rem is for root em. And grem is for Groot em—which doesn’t exist.

rem用于root em 。 grem是针对Groot em的 -不存在。

So an em is a multiplier of its parent element’s font-size whereas rem is a multiplier of its root element’s font-size. Root?

因此， em是其父元素的font-size的倍数，而rem是其根元素的font-size的倍数。根？

html <- root
   /  \
head  body
 /      \
…        …

This is what our website is—a tree!—an “upside-down” tree!

这就是我们的网站-一棵树！-一棵“倒置”树！

…
        <style>
html { font-size: 20px; }
.a { font-size: 1.5rem; }
.b { font-size: 2.0rem; }
        </style>
        …

Here we’ve replaced .wrapper with html, because now we’re using rem. Given this, .a and .b now inherit their font-size from the html element, as supposed to our .wrapper.

在这里，我们用html替换了.wrapper ，因为现在我们使用rem 。鉴于此， .a和.b现在应该从html元素继承其font-size ，就像我们的.wrapper 。

Note that nothing’s changed—our website is identical, but we’ve broken an em parent-child relationship with a rem root-child relationship.

请注意，没有任何变化—我们的网站是相同的，但是我们已经破坏了em 父子关系与rem 根子关系。

Even more, we can replace the html element with a pseudo-class:

甚至，我们可以用伪类替换html元素：

:root { font-size: 20px; }

Again—identical, but semantic. So, rem differs from em because instead of inheriting the parent’s font-size, it jumps to the html or :root element. What if we were to change :root font-size:

同样，相同但语义。因此， rem与em有所不同，因为rem不会继承父级的font-size ，而是跳转到html或:root元素。如果我们要更改 :root font-size怎么办：

:root { font-size: 15px; }

What happened? Our span is 25% smaller — evaluating to 22.5px and 30px— because we changed the :root font-size. And this is an awesome idea. Because we can write CSS not in rules but relationships.

发生了什么？我们的span缩小了25％(分别为22.5px和30px ，因为我们更改了:root font-size 。这是一个很棒的主意。因为我们可以按照规则而不是关系来编写CSS。

Let’s recap: we use em to create a shallow relationship with an element’s closest parent that evaluates a font-size whereas we use rem to create a deep relationship with the :root.

让我们来回顾一下：我们使用em与元素的最接近的父级创建浅层关系，该父级评估font-size而我们使用rem与:root创建深层的关系。

em和rem +媒体查询 (The em and rem + media queries)

An even more awesome idea than how we use em and rem is using them in tandem for media queries. Media queries allow us to override CSS in some circumstance, such as the website’s width.

与我们如何使用em和rem相比，一个更棒的想法是将它们串联用于媒体查询。媒体查询允许我们在某些情况下(例如网站的宽度)覆盖CSS。

For example:

例如：

…
        <style>
p { color: green; }
@media (max-width: 8.5in) { p { color: blue; } }
        </style>
        …

Here p renders green, but if the width is at or less than 8.5in, the same p reads blue. And we can go a step further than this: instead of using media queries for color, we can use them for font-size:

在这里， p呈现green ，但是如果宽度等于或小于8.5in ，则相同的p会显示blue 。我们可以做得比这更进一步：我们可以将它们用于font-size ，而不是对color使用媒体查询：

…
        <style>
:root { font-size: 20px; }
.a { font-size: 1.5rem; }
.b { font-size: 2.0rem; }
@media (max-width: 650px) { :root { font-size: 3vw; } }
        </style>
        …

If our website is rendered at or less than 650px, our em and rem inherit their font-size not as 20px but 3vw, or 3% our viewport’s width. Having done so, we’ve connected our CSS as opposed to siloing it.

如果我们的网站呈现为650px或小于650px ，则我们的em和rem继承其font-size不是20px而是3vw ，即视口宽度的3％。这样做之后，我们已经连接了CSS，而不是孤立它。

A final note: em and rem are not limited to font-size. We can use em and rem to describe width, height—wherever CSS expects a size. Compounding this with media queries makes us CSS superheroes.

最后一点 ： em和rem不限于font-size 。我们可以使用em和rem描述width ， height -wherever CSS预计大小。再加上媒体查询，使我们成为CSS的超级英雄。

Learning HTML and CSS doesn’t have to be painful—it can be subtle and these languages can be quite powerful. And em, rem, and grem are some of the most powerful units at our disposal we can use to design websites.

学习HTML和CSS不必很痛苦-它可以很细微，这些语言可以非常强大。 em ， rem和grem是我们可以用来设计网站的一些功能最强大的单元。

别忘了在Scrimba上有免费的课程，我教如何从头开始创建相同的网站。点击这里报名！？ (Don’t forget there’s a free course on Scrimba where I teach how to make the same website from scratch. Click here to enroll! ?)

翻译自: https://www.freecodecamp.org/news/em-units-versus-rem-units-fight-382c16af8a67/

cumi6497

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS单位之战：EM与。 REMs ...打架！？

by ZAYDEK 由ZAYDEK tl; dr不要*只是*使用px (tl;dr don’t *just* use px) CSS单位之战：EM与。 REMs ...打架！？ (CSS Unit Battle: EMs Vs. REMs…FIGHT! ?) “两个单位进入！一个单位离开……” – ThunderDOM (“Two units enter! One unit leave...
复制链接

扫一扫

CSS单位之战：EM与。 REMs ...打架！ ？

tl; dr不要*只是*使用px (tl;dr don’t *just* use px)

CSS单位之战：EM与。 REMs ...打架！ ？ (CSS Unit Battle: EMs Vs. REMs…FIGHT! ?)

“两个单位进入！ 一个单位离开……” – ThunderDOM (“Two units enter! One unit leaves…” –ThunderDOM)

我还在Scrimba上教授了免费HTML / CSS课程，在该课程中，我教如何从头开始构建漂亮的博客。 点击这里报名！ ？ (I also taught a free HTML/CSS course on Scrimba where I teach how to build a beautiful blog from *scratch*. Click here to enroll! ?)

Scrimba.com是一个交互式前端平台，在该平台上，网站被记录为事件，而不是视频，并且可以被编辑！ ？ (Scrimba.com is an interactive front-end platform where websites are recorded as events — not videos — and can be edited! ?)