rem是一个非常酷的CSS3属性，它相对于根元素<html>的字体大小适配。举一个非常简单的场景，要根据3种屏幕大小适配字体：
通常这么实现：
/* Document level adjustments */
html {
font-size: 17px;
}
@media (max-width: 900px) {
html { font-size: 15px; }
}
@media (max-width: 400px) {
html { font-size: 13px; }
}
/* Type will scale with document */
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 2rem;
}
这样做很简单，但是有点儿想当然。最主要的问题是：你不能指望一个页面上设置的类型，能够满足所有模块的比例要求：大屏幕可能界面元素会显示的非常大，小的又太小。或者甚至相反，大屏幕可能无法显示足够小。遇到这种情况，可以继续用@media query调整大小，但是这样做效率不高，而且会非常混乱。
因此，我的想法是：
1、文档级别依然使用px像素，能够直接有效地检测出分辨率的变化。
2、页面每个模块用rem设置字体大小。因为rem是相对于根元素<html>的字体大小适配。
3、文本元素（H1、H2、p、li等等），如果你调整他们的大小，并用em作为单位，就能和模块大小形成相对比例。“em”作单位时，是一个相对于父元素的值。
下面是一个示例图：
实现如下
/* Document level adjustments */
html {
font-size: 17px;
}
@media (max-width: 900px) {
html { font-size: 15px; {
}
@media (max-width: 400px) {
html { font-size: 13px; }
}
/* Modules will scale with document */
.header {
font-size: 1.5rem;
}
.footer {
font-size: 0.75rem;
}
.sidebar {
font-size: 0.85rem;
}
/* Type will scale with modules */
h1 {
font-size: 3em;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 2em;
}
这样你可以设置一个模块级别的字体大小，这是非常容易的。
当然IE6-8是不支持CSS3的rem属性的。移动端的话也不需要考虑这个问题。
相关推荐
相反，`rem`（root em）单位则相对灵活，它表示相对于根元素（通常是`html`元素）字体大小的单位。通过将所有尺寸转换为`rem`，我们可以更容易地调整整个页面的比例，以适应不同屏幕大小。 `postcss-px2rem`是一个...
`rem`（root em）单位是一种基于根元素（通常是html元素）字体大小的相对单位，它可以帮助我们实现响应式布局，使得设计能够自适应不同分辨率和屏幕尺寸的设备。本主题将详细讲解如何利用`flexible.js`和`...
为了实现这种响应式设计，开发者们常常使用相对单位，如`rem`（root em）来替代绝对单位，如`px`（像素）。`rem`单位使得我们可以根据根元素（通常是`html`元素）的字体大小来调整整个页面的布局，从而实现自适应。...
与传统的`em`单位不同，`em`是相对于父元素的字体大小，而`rem`始终基于根元素（通常是`<html>`）的字体大小。这意味着，通过改变`<html>`的字体大小，我们可以统一调整整个页面上的所有基于`rem`的元素尺寸，从而...
REM（Root Em）是以根元素（通常是html元素）的字体大小为基准的单位，通过调整根元素的字体大小，可以实现整个页面元素尺寸的统一缩放。 在CSS中，我们可以设置html元素的`font-size`属性来定义REM单位的基础值。...
这样，当根元素的字体大小改变时，所有使用rem的元素都会自动调整。 ```css body { font-size: 16px; /* 默认字体大小，可以视需求而定 */ } .some-element { width: 2rem; /* 宽度会根据根元素的字体大小自动...
3. **元素大小转换**：为了让所有子元素使用rem单位时也能正确适配，js文件可能会遍历DOM树，将所有使用px、em等单位的样式转换为rem。这通过读取元素的原始样式，计算新的rem值，并使用CSS的style属性进行设置来...
- **特点**：当元素的字体大小使用em单位时，1em等于当前字体大小。如果后代元素使用em单位，则会相对于其父元素的字体大小进行计算。 #### rem - **相对单位**：相对于根元素（html）的`font-size`的值。 - **用途...
在前端开发领域，"code rem适配"是一个重要的概念，主要涉及到网页的响应式设计和字体大小的适配。在现代网页设计中，为了确保页面在不同设备和屏幕尺寸上都能有良好的显示效果，开发者通常会采用相对单位来定义元素...
在移动端Web开发中，rem（root em）布局是一种常见的响应式设计方法，它允许开发者以相对于根元素（通常是html元素）的字体大小来设置元素尺寸，从而实现不同屏幕尺寸下的自适应布局。本文将深入探讨rem布局的工作...
压缩包中的“rem”文件可能是CSS样式表，其中包含了使用"rem"单位的样式规则，或者是JavaScript文件，用于动态计算和设置根元素的字体大小，或者包含有关如何在实际项目中应用"rem"单位的文档或示例。 总的来说，...
在实际代码中，我们可以设置一个基础字体大小（比如10px），然后将所有元素的宽度或高度设置为相应的`rem`值，如0.75rem（对于75px的设计稿等分）。 接下来，我们需要处理不同设备的屏幕宽度差异。通常，我们会使用...
按钮、链接等元素的大小也要使用rem，这样当根元素字体大小变化时，它们会相应地缩放。 2. **轮播图**：图片通常使用百分比宽度填充容器，高度可以自动保持比例。控制按钮的大小和间距也应使用rem，确保在小屏幕...
rem（root em）单位是指相对于根元素（通常是`<html>`标签）字体大小的单位。这意味着，当我们在CSS中设置一个元素的宽度、高度或其他属性为rem时，它的值会基于`<html>`标签的`font-size`属性来计算。这与em单位...
`rem`（root em）单位是解决这个问题的一种有效方式，它可以基于根元素（通常是`html`元素）的字体大小进行调整，从而实现页面元素的相对缩放。本文将深入探讨两种基于`rem`的适配方案，并通过实战案例来解析它们的...
与传统的像素（px）单位相比，REM允许开发者更容易地调整整个页面的比例，特别是在响应式设计中，可以统一改变根元素的字体大小，进而影响所有使用REM单位的子元素尺寸，从而适应不同分辨率和屏幕尺寸的设备。...
例如，如果根元素字体大小为10px，那么1rem就等于10px，2rem就等于20px。这种单位的优势在于，当根元素字体大小改变时，所有使用REM单位的元素都会相应地进行缩放。这就提供了一种简单而有效的方法来实现适配不同...
REM（root em）代表的是根元素（通常是html元素）的字体大小，而不是当前元素的字体大小，如EM单位那样。这意味着，通过改变html元素的font-size属性，我们可以影响整个文档中所有使用REM单位的元素大小。这种特性...
在开发过程中，可以结合使用这三种单位，例如在HTML文档的根元素上设置一个基础的rem字体大小，再用em单位来设计局部组件的字体大小，保持整体的一致性，同时给单个元素提供足够的灵活性。总之，理解px、em、rem的...
`rem`（root em）是相对于根元素（通常是html元素）的字体大小的单位。通过设置html元素的font-size属性，我们可以用`rem`来控制整个页面元素的相对大小。例如，如果html的font-size为20px，那么1rem就等于20px。...