响应式设计下 rem 与 em 的应用技巧-JavaScript中文网-JavaScript教程资源分享门户

在响应式设计中，如何实现页面元素的自适应布局是一个重要的问题。rem 与 em 是两种常用的单位，它们可以帮助我们实现页面元素的自适应布局。本文将介绍 rem 与 em 的基本概念、应用技巧以及注意事项，并提供示例代码以供参考。

rem 与 em 的基本概念

rem 是相对于根元素（即 html 元素）的字体大小的单位，em 是相对于父元素字体大小的单位。例如，如果根元素的字体大小为 16px，那么 1rem 就等于 16px。如果父元素的字体大小为 12px，那么 1em 就等于 12px。

rem 的应用技巧

设置根元素字体大小

为了使用 rem 单位，我们需要先设置根元素的字体大小。通常情况下，我们将根元素的字体大小设置为 16px。在 CSS 中，可以使用以下代码设置根元素的字体大小：

html {
  font-size: 16px;
}

使用 rem 单位

在使用 rem 单位时，我们可以根据设计稿的尺寸来计算出具体的值。例如，如果设计稿中某个元素的宽度为 320px，那么相应的 CSS 代码可以写成：

.element {
  width: 20rem; /* 320px / 16px = 20rem */
}

媒体查询中使用 rem 单位

在响应式设计中，我们通常需要使用媒体查询来适应不同的屏幕尺寸。在媒体查询中，我们可以使用 rem 单位来实现自适应布局。例如，下面的代码将在屏幕宽度小于 480px 时将元素的宽度设置为 100%：

@media screen and (max-width: 480px) {
  .element {
    width: 100%;
  }
}

使用 JS 动态设置根元素字体大小

有时候，我们需要根据屏幕尺寸来动态调整根元素的字体大小。这时，我们可以使用 JavaScript 来实现。例如，下面的代码将根据屏幕宽度动态设置根元素的字体大小：

function setRootFontSize() {
  var screenWidth = window.innerWidth;
  var rootFontSize = screenWidth / 20; /* 假设设计稿宽度为 320px，将 320px / 16px = 20rem */
  document.documentElement.style.fontSize = rootFontSize + 'px';
}

window.addEventListener('resize', setRootFontSize);
setRootFontSize();

em 的应用技巧

使用 em 单位

在使用 em 单位时，我们可以根据父元素的字体大小来计算出具体的值。例如，如果父元素的字体大小为 14px，那么相应的 CSS 代码可以写成：

.element {
  font-size: 1.5em; /* 14px * 1.5 = 21px */
}

嵌套使用 em 单位

在某些情况下，我们需要在嵌套的元素中使用 em 单位。这时，em 单位的值将相对于最近的父元素字体大小来计算。例如，下面的代码将在内部元素中使用 em 单位：

.container {
  font-size: 14px;
}

.container .element {
  font-size: 1.5em; /* 14px * 1.5 = 21px */
}

使用 rem 与 em 结合的方式

在某些情况下，我们需要同时使用 rem 与 em 单位来实现自适应布局。例如，下面的代码将在屏幕宽度小于 480px 时将元素的宽度设置为 100%，在屏幕宽度大于等于 480px 时将元素的宽度设置为 320px：

// javascriptcn.com 代码示例
.element {
  width: 20rem; /* 320px / 16px = 20rem */
}

@media screen and (max-width: 480px) {
  .element {
    width: 100%;
  }
}

@media screen and (min-width: 480px) {
  .element {
    width: 20em; /* 320px / 14px = 20em */
  }
}

注意事项

在使用 rem 与 em 单位时，需要注意以下几点：

不要在媒体查询中使用 px 单位，应该使用 rem 或 em 单位。
不要在媒体查询中使用绝对值，应该使用相对值。
在使用 em 单位时，要注意嵌套的元素字体大小的影响。
在使用 rem 单位时，要注意根元素字体大小的影响。

示例代码

下面的代码演示了如何使用 rem 与 em 单位实现自适应布局：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>响应式设计下 rem 与 em 的应用技巧</title>
  <style>
    html {
      font-size: 16px;
    }

    .container {
      font-size: 14px;
    }

    .element {
      width: 20rem; /* 320px / 16px = 20rem */
      height: 3em; /* 3 * 14px = 42px */
      font-size: 1.5em; /* 14px * 1.5 = 21px */
      padding: 1rem; /* 16px */
      margin: 1em; /* 14px */
      border: 1px solid #ccc;
      box-sizing: border-box;
    }

    @media screen and (max-width: 480px) {
      .element {
        width: 100%;
        margin: 0;
      }
    }

    @media screen and (min-width: 480px) {
      .element {
        width: 20em; /* 320px / 14px = 20em */
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="element">Hello World!</div>
    <div class="element">Hello World!</div>
    <div class="element">Hello World!</div>
  </div>
</body>
</html>

总结

本文介绍了 rem 与 em 的基本概念、应用技巧以及注意事项，并提供了示例代码以供参考。在响应式设计中，使用 rem 与 em 单位可以帮助我们实现页面元素的自适应布局，提高页面的可读性和用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6584fbfad2f5e1655df9b0f3