rem 和 em 响应式布局

最新推荐文章于 2024-08-19 10:33:23 发布

孩子你要相信光

最新推荐文章于 2024-08-19 10:33:23 发布

阅读量1.5k

点赞数 33

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/qq505751223/article/details/139369969

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

使用 rem 实现响应式布局

使用 em 实现响应式布局

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 的直接参与来计算视口尺寸。