CSS의 rem 단위 이해 및 사용

rem이 무엇인가요

아마도 라디오나 다른 음악 플레이어를 사용하기 전에 "R.E.M."이라는 단어를 들어보셨을 것입니다. 이 밴드의 눈에는 이 단어가 "light sleep while rapid eye movement"의 약어이고, CSS에서 rem은 "루트 요소를 참조로 하는 em 단위"를 의미합니다. 종교적 신념을 버리거나 달에 사는 사람을 믿게 만드는 것은 아니지만 조화롭고 매끄러운 디자인을 달성하는 데 도움이 될 수 있습니다.

W3C 사양의 1rem 정의에 따르면

1rem은 루트 요소의 글꼴 크기로 계산된 값과 같습니다. 루트 요소의 글꼴 크기가 명시적으로 지정되면 rem 단위는 속성의 초기 값을 참조합니다.

이는 1rem이 html 요소의 글꼴 크기와 동일하다는 의미입니다(대부분의 브라우저에서 루트 요소의 글꼴 크기는 16px입니다).

Rem 단위 대 Em 단위

em 단위를 사용하세요. 주요 문제는 이들이 사용자 요소와 연관되어 있다는 것입니다. 이 경우 이러한 요소는 서로 중첩되어 예상치 못한 결과를 초래할 수 있습니다. 다음 예를 고려해 보겠습니다. 루트 요소의 텍스트 크기가 기본값인 16px인 경우 모든 목록의 글꼴 크기를 12px로 설정하려고 합니다.

html { 
  font-size: 100%; 
} 
 
ul { 
  font-size: 0.75em; 
}

Under에 중첩된 목록이 있는 경우 다른 목록의 경우 내부 목록의 글꼴 크기는 외부 목록 글꼴 크기의 75%(즉, 9px)가 됩니다.

ul ul { 
  font-size: 1em; 
}

이 방법으로 이 문제는 해결될 수 있지만 여전히 깊게 중첩된 요소에 특별한 주의를 기울여야 합니다.

rem 단위를 사용하면 상황이 간단해집니다.

html { 
  font-size: 100%; 
} 
 
ul { 
  font-size: 0.75rem; 
}

모든 크기가 루트 요소의 텍스트 크기를 참조로 기준으로 하면 요소를 중첩할 필요가 없습니다. 개별적으로 스타일을 지정했습니다.

rem 단위를 사용하여 텍스트 크기 정의

Jonathan Snook는 rem 단위를 사용하여 텍스트 크기를 정의한 최초의 개발자 중 한 명으로 2011년 5월에 "rem 사용"이라는 제목의 논문을 발표했습니다. 텍스트 크기를 정의하려면" 항목을 참조하세요. 대부분의 CSS 개발자와 마찬가지로 그는 em 단위의 복잡한 레이아웃과 관련된 일련의 문제를 해결해야 했습니다.

당시 IE의 이전 버전은 여전히 ​​시장 점유율이 높았고 px로 정의된 텍스트의 크기를 조정할 수 없었습니다. 그러나 앞에서 본 것처럼 em 단위를 사용할 때는 요소의 중첩을 잊어버리고 예상치 못한 결과를 얻기 쉽습니다.

rem 단위를 사용하여 텍스트 크기를 정의할 때 가장 큰 문제는 이러한 값을 사용하기가 다소 어렵다는 것입니다. 예를 들어 루트 요소의 텍스트 크기가 16px이라고 가정합니다. 일반적으로 사용되는 텍스트 크기는 다음과 같이 rem 값으로 변환됩니다.

10px = 0.625rem

12px = 0.75 rem

14px = 0.875rem

16px = 1rem(기본)

18px = 1.125rem

20px = 1.25rem

24px = 1.5rem

30px = 1.875rem

32px = 2rem

보시다시피 이 값은 계산하기 매우 불편합니다. 따라서 Snook에서는 이 문제를 해결하기 위해 62.5라는 방법을 사용합니다. 그러나 이는 이미 em 단위에서 사용되었기 때문에 혁신이 아닙니다.

body { font-size:62.5%; }  /* =10px */ 
h1   { font-size: 2.4em; } /* =24px */ 
p    { font-size: 1.4em; } /* =14px */ 
li   { font-size: 1.4em; } /* =14px? */

rem 단위가 루트 요소와 연결되어 있기 때문에 Snook의 개선된 솔루션은 다음과 같습니다.

html { font-size: 62.5%; } /* =10px */ 
body { font-size: 1.4rem; } /* =14px */ 
h1 { font-size: 2.4rem; } /* =24px */

고려해볼 만한 한 가지 점은 일부 브라우저가 rem 단위를 지원하지 않는다는 것입니다. 따라서 위의 코드는 다음과 같이 다시 작성할 수 있습니다.

html { 
    font-size: 62.5%; 
} 
 
body { 
    font-size: 14px; 
    font-size: 1.4rem; 
} 
 
h1 { 
    font-size: 24px; 
    font-size: 2.4rem; 
}

이 방법이 가장 좋은 것 같지만 여전히 이 방법을 권장하지 않는 사람들이 있습니다. Harry Roberts는 실제로 rem 단위를 사용한 경험 중 일부를 기록한 기사를 썼습니다. 그의 관점에서 볼 때 62.5% 솔루션을 사용하면 계산이 쉬워지지만(px 단위의 글꼴 크기는 rem보다 정확히 10배 더 크기 때문에) 개발자는 사이트의 모든 텍스트 크기를 .

CSS-Tricks의 Chris Coyier가 세 번째 솔루션을 제안했습니다. 그의 솔루션은 지금까지 접한 세 가지 단위를 최대한 활용합니다. 루트 요소의 길이 단위는 여전히 px를 사용하고, 모듈은 rem 단위를 사용하며, 모듈 내의 요소는 em 단위를 사용합니다. 이 방법을 사용하면 루트 요소의 크기를 쉽게 조작하고 모듈의 크기를 조정할 수 있습니다. 모듈의 내용 크기는 모듈 자체의 텍스트 크기에 따라 조정됩니다. Louis Lazaris는 나중에 CSS의 Em Units의 힘에서 자신의 주장을 밝혔습니다.

아래 예에서 Chris의 솔루션이 어떻게 작동하는지 확인할 수 있습니다.

코드는 SitePoint(미리 보려면 @SitePoint 클릭)에서 CodePen의 "CSS에서 em 사용" 및 rem 단위로 볼 수 있습니다. ” 미리 보려면 클릭하세요.

보시다시피 이 문제를 해결하기 위해 활용되는 새로운 기술은 없습니다. 아마도 일부 조합은 개발자의 상상력에 의해서만 제한될 수 있습니다.

미디어 쿼리에 rem 단위 사용

미디어 쿼리에 em 및 rem 단위를 사용하는 것은 "최적 줄 길이" 개념과 밀접한 관련이 있으며 사용자의 읽기 경험을 원활하게 할 수 있습니다. 2014년 9월, Smashing Magazine은 Size Matters: Mastering the Balance between Text Size and Line Width in Web Responsive Design이라는 제목의 웹 타이포그래피 기사를 게재했습니다. 가장 흥미로운 점은 기사에서 최적의 줄 너비를 제공한다는 것입니다. 45~85자(공백 및 구두점 포함)이며, 65가 이상적인 줄 너비 값입니다.

粗略的估计一个字节大小就是 1rem，利用这个方法我们就可以用一种移动优先的方式控制内容的单行文本流：

.container { 
  width: 100%; 
} 
 
@media (min-width: 85rem) { 
  .container { 
    width: 65rem; 
  } 
}

然而在媒体查询中使用 em 和 rem 单位作为媒体查询的条件时有一个有意思的细节：1 rem，1em 还有浏览器默认文字大小这三值表示这同一个值。这样做的原因可以在媒体查询规范得到解释(特别强调):

询中相对单位都是以一个初始值作为基准，这就意味着这些单位永远不会基于声明的结果。例如：在 HTML 中，em 单位与用户浏览器或者用户偏好设置中设置的初始文字大小有关，而不是页面上的样式中定义的文字大小。

让我们看一个关于这个特性的一个小例子：

在 CodePen 上看一个关于媒体查询的 demo

首先，在我们的 HTML 文档中，有一个元素将会展现视口的宽度：

`Document width: <span></span>px`

接下来是两条媒体查询语句，一条是使用 rem 单位，另一条使用 em 单位(这里为了简便，使用了 Sass)

html { 
  font-size: 62.5%; /* 62.5% of 16px = 10px */ 
 
  @media (min-width: 20rem) { 
    /* 20*16px = 320px */ 
    background-color: lemonchiffon; 
    font-size: 200%; 
    /* 200% of 16px = 32px */ 
  } 
 
  @media (min-width: 30em) { 
    /* 30*16px = 480px */ 
    background-color: lightblue; 
    font-size: 300%; /* 300% of 16px = 48px */（译：原文是48px） 
  } 
}

最后，我们使用一点 jQuery 在页面上显示视口的宽度，并且在窗口缩放的时候更新这个值：

$('span').text($(window).width()); 
 
$(window).on('resize', function(e) { 
  $('span').text($(window).width()); 
});

在开头，我们使用了 62.5% 这个方法来说明，修改根元素字体大小不会对媒体查询产生任何影响。当我们更改窗口的宽度时，我们可以看到在 320 px 时，第一条媒体查询开始起作用，到480px第二条媒体查询开始起作用。任何一条在媒体查询中对文字大小声明的改变都没有起作用。唯一一个可以改变媒体查询中宽度的是在浏览器里更改默认文字大小。

因为这个原因，在媒体查询语句中使用 em 单位还是 rem 单位已经不那么重要了。事实上，无论是Foundation v5还是最近刚发布的Bootstrap v4 alpha都在他们的媒体查询中使用了 em 单位。

使用 rem 单位来缩放文档

我们能发现的第三种使用 rem 单位的方式是去构建可缩放组件。使用 rem 来定义元素的宽度，外边距和内边距 通过使用根元素的字体大小作为一个接口使元素缩放一致变为了可能。 我们可以通过下面两个例子来看这是怎么起作用的。

使用 rem 来缩放文档实例一

在这个例子里，我们通过媒体查询中更改根元素的文字大小。就像上一个章节所讲，这样做的目的是为用户定制不同设备下的不同阅读体验。通过 rem 单位来表示宽度，外边距，内边距，这样所有元素就会基于用户的设备大小缩放。

让我们看另一个例子：

代码可以看 SitePoint(@SitePoint点击预览) 在 CodePen 写的 《使用 rem 动态缩放模块》点击预览

在第二个例子中，我们使用 JavaScript 来做同样的操作。这次用户根据自己的需要手动控制界面的大小。我们可以使用多种方式(可以使用数据库，cookie 还有本地存储)来存储用户数据，这样就可以给用户搭建一个基于用户偏好的个性化系统。

总结

在这里总结一下到目前为止我们对 CSS 中 rem 单位的认识。很显然，在项目中使用 rem 有许多优点，比如：响应式，可缩放，增加阅读体验，增加自定义元素的灵活性。rem 虽然不是一个通用的解决方案，但是通过谨慎的使用，它还是可以解决困扰开发者多年的问题。 我们每个人都可以去挖掘 rem 的所有潜能。从你的编辑器开始吧，实验并向我们分享您的成果。