面试题：CSS中color与font-size在响应式设计中的最佳实践

1. 媒体查询（Media Queries）

适用场景：广泛用于根据不同屏幕尺寸、设备方向、分辨率等条件来应用不同的样式。
示例：

/* 当屏幕宽度小于等于 600px 时 */
@media (max - width: 600px) {
  body {
    color: red;
    font - size: 14px;
  }
}
/* 当屏幕宽度大于 600px 且小于等于 900px 时 */
@media (min - width: 601px) and (max - width: 900px) {
  body {
    color: blue;
    font - size: 16px;
  }
}

2. CSS 变量（Custom Properties）结合媒体查询

适用场景：便于统一管理和修改样式，在不同屏幕尺寸下修改变量值从而改变颜色和字体大小。
示例：

:root {
  --main - color: black;
  --font - size - base: 16px;
}
@media (max - width: 600px) {
  :root {
    --main - color: green;
    --font - size - base: 14px;
  }
}
body {
  color: var(--main - color);
  font - size: var(--font - size - base);
}

3. JavaScript 动态调整

适用场景：当需要根据复杂的业务逻辑或者实时变化来动态调整样式时，比如根据用户行为或者设备特性来改变。
示例：

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      color: black;
      font - size: 16px;
    }
  </style>
</head>

<body>
  <script>
    function adjustStyle() {
      if (window.innerWidth <= 600) {
        document.body.style.color = 'orange';
        document.body.style.fontSize = '14px';
      } else {
        document.body.style.color = 'black';
        document.body.style.fontSize = '16px';
      }
    }
    window.addEventListener('resize', adjustStyle);
    adjustStyle();
  </script>
</body>

</html>

面试题：CSS中color与font-size在响应式设计中的最佳实践

知识考点

面试题答案

1. 媒体查询（Media Queries）

2. CSS 变量（Custom Properties）结合媒体查询

3. JavaScript 动态调整