上一次研究过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。
4887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
