响应式设计下 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：

-- -------------------- ---- -------
-------- -
  ------ ------ -- ----- - ---- - ----- --
-

------ ------ --- ----------- ------ -
  -------- -
    ------ -----
  -
-

------ ------ --- ----------- ------ -
  -------- -
    ------ ----- -- ----- - ---- - ---- --
  -
-

注意事项

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

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

示例代码

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

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  ------------- --- - -- -------------
  -------
    ---- -
      ---------- -----
    -

    ---------- -
      ---------- -----
    -

    -------- -
      ------ ------ -- ----- - ---- - ----- --
      ------- ---- -- - - ---- - ---- --
      ---------- ------ -- ---- - --- - ---- --
      -------- ----- -- ---- --
      ------- ---- -- ---- --
      ------- --- ----- -----
      ----------- -----------
    -

    ------ ------ --- ----------- ------ -
      -------- -
        ------ -----
        ------- --
      -
    -

    ------ ------ --- ----------- ------ -
      -------- -
        ------ ----- -- ----- - ---- - ---- --
      -
    -
  --------
-------
------
  ---- ------------------
    ---- --------------------- ------------
    ---- --------------------- ------------
    ---- --------------------- ------------
  ------
-------
-------

总结

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

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