CSS相对单位rem

上一次研究过em，今天接着继续研究rem
rem：

rem的作用和em一样，是css中的相对长度单位。

1），对font-size使用rem

当浏览器解析HTML文档时，创建了一个用来代表页面元素的集合，叫做DOM（文档对象模型，Document Object Model）。树状结构，每一个节点代表一个元素。<html>就是顶层节点（根节点），在下面的是它的子节点<head>和<body>，再往下就是它们的子节点，还有后代节点，如此类推。

根节点是文档里所有其他元素的祖先。它有一个特别的伪类（pseudo-class）选择器（:root），在样式表里可以用这个选择器表示。使用带类名的类型选择器html，或者直接用标签选择器，效果是一样的。

rem是根em（root em）的缩写。rem是和根元素关联的，不依赖当前元素。不管你在文档中的什么地方使用这个单位，1.2rem的计算值是相等的，等于1.2倍的根元素的字号大小。

下面的示例代码中，声明了根元素的字号大小，并在嵌套的无序列表中使用rem声明字号大小

:root {                    1
  font-size: 1em;          2
}
ul {
  font-size: .8rem;
}

在这个示例里，根字号大小是浏览器的默认大小16px（根元素的1em等于浏览器的默认字号大小）。无序列表的字号大小为0.8rem，计算结果是12.8px。

综合，em 和 rem ，可视化面板变得“响应式”：

媒体查询（media query） —— 通过@media规则来声明样式，在不同的屏幕尺寸或者媒体类型（如打印机或显示器）下，触发对应的样式控制。这是响应式设计的关键要素。

:root {                            1
  font-size: 1em;                  1
}                                  1
@media (min-width: 800px) {        2
  :root {                          2
    font-size: 0.875em;            2
  }                                2
}                                  2
@media (min-width: 1200px) {       3
  :root {                          3
    font-size: 1.2em;              3
  }                                3
}

尽管你没有直接对这个面板做任何的修改，它现在是响应式的。在小屏幕上，譬如一台手机，字号大小会被渲染成更小的（12px）。然后，在更大的屏幕上，宽大于800px和大于1200px的，组件的字号会分别放大到16px和19.2px。

猜你喜欢