目录
rem
和 em
都是在 CSS 中用于相对长度单位的。它们使得我们能够更灵活地设置元素的尺寸,特别是在响应式布局中。以下是关于如何使用 rem
和 em
实现响应式布局的代码示例和解释。
使用 rem 实现响应式布局
rem
是相对于根元素(<html>
)的字体大小来计算的。因此,如果你改变了根元素的字体大小,所有使用 rem
单位的元素都会相应地改变大小。
步骤:
- 设置根元素的字体大小:通常,我们会在 CSS 中设置一个基准的字体大小,比如
16px
。 - 使用 rem 单位:在 CSS 中,你可以使用
rem
单位来设置元素的尺寸,如宽度、高度、字体大小等。 - 媒体查询:使用媒体查询来根据屏幕尺寸改变根元素的字体大小,从而实现响应式布局。
代码示例:
/* 设置基准字体大小 */
html {
font-size: 16px; /* 默认字体大小 */
}
/* 当屏幕宽度小于 768px 时,减小字体大小 */
@media (max-width: 768px) {
html {
font-size: 14px; /* 在小屏幕上使用较小的字体大小 */
}
}
/* 当屏幕宽度小于 480px 时,进一步减小字体大小 */
@media (max-width: 480px) {
html {
font-size: 12px; /* 在更小的屏幕上使用更小的字体大小 */
}
}
/* 使用 rem 设置元素样式 */
.container {
width: 80rem; /* 相当于 80 * 字体大小,随字体大小变化 */
padding: 2rem; /* 相当于 2 * 字体大小,随字体大小变化 */
}
.title {
font-size: 2.5rem; /* 相当于 2.5 * 字体大小,随字体大小变化 */
}
在这个示例中,我们使用了三个媒体查询来改变根元素的字体大小。当屏幕宽度小于 768px 时,字体大小减小到 14px;当屏幕宽度小于 480px 时,字体大小进一步减小到 12px。由于 .container
和 .title
的样式使用了 rem
单位,它们的尺寸会随着根元素字体大小的变化而自动调整。
使用 em 实现响应式布局
em
是相对于其最近的父元素的字体大小来计算的。因此,如果你改变了父元素的字体大小,所有使用 em
单位的子元素都会相应地改变大小。
步骤:
- 设置父元素的字体大小:在 CSS 中,你可以为特定的父元素设置一个字体大小。
- 使用 em 单位:在 CSS 中,你可以使用
em
单位来设置元素的尺寸,这些元素是相对于其最近的父元素的字体大小来计算的。 - 调整父元素的字体大小:根据需要,你可以通过媒体查询或其他方式调整父元素的字体大小,从而实现响应式布局。
代码示例:
/* 设置默认字体大小 */
body {
font-size: 16px; /* body 是所有元素的根父元素,或至少是大部分元素的父元素 */
}
/* 当屏幕宽度小于 768px 时,减小 body 的字体大小 */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
/* 当屏幕宽度小于 480px 时,进一步减小 body 的字体大小 */
@media (max-width: 480px) {
body {
font-size: 12px;
}
}
/* 使用 em 设置元素样式 */
.container {
font-size: 1.2em; /* 相对于 body 的字体大小,如果 body 字体大小为 16px,这里就是 19.2px */
width: 50em; /* 相当于 50 * 当前字体大小 */
padding: 2em; /* 相当于 2 * 当前字体大小 */
}
.container .title {
font-size: 1.5em; /* 相对于 .container 的字体大小 */
}
在这个示例中,.container
的字体大小设置为 1.2em
,这意味着它的字体大小是 body
字体大小的 1.2 倍。同样,.container .title
的字体大小设置为 1.5em
,这将是 .container
字体大小的 1.5 倍。由于我们使用了媒体查询来改变 body
的字体大小,所以 .container
和 .container .title
的字体大小也会随着视口宽度的变化而自动调整。
在使用 rem
和 em
单位来实现响应式布局时,通常不需要使用 JavaScript 来直接计算视口(viewport)的宽度或高度,并据此设置字体大小。相反,你可以使用 CSS 的媒体查询(Media Queries)来根据视口的尺寸变化来更改根元素(对于 rem
)或特定父元素(对于 em
)的字体大小。
如果你需要更复杂的响应式布局,并且希望基于视口的实际尺寸或特性(如像素密度)来设置样式,你可以使用 CSS 的其他功能,如 viewport
单位(如 vw
, vh
, vmin
, vmax
)或 CSS 环境变量(CSS Custom Properties,也称为 CSS 变量)。但是,这些通常不需要 JavaScript 的直接参与来计算视口尺寸。