Rethink RWD through CSS Container Queries

重新思考如何构建 RWD 网页，透过 CSS Container Queries

@ CSS

前言

一开始听到 CSS Container Queries🔗 这个名词是在一两年前，随着时间演进构建网页的模式也变动了许多次，我也越来越确信这项技术会是未来构建 RWD 网页的一块重要拼图，文章将介绍现有的 Media Queries🔗 存在的缺陷，新解方则具备哪些优势？

Media Queries 与 Container Queries 差异

说到 RWD 应该都会联想到 Media Queries 这项属性，而新旧属性两者它们各自提供不同的解决方案通常用于解决 「UI 片段在不同设备尺寸显示的样式切换」，举例来说按照 Media Queries 来撰写 RWD 的思维是：

希望当前设备尺寸在 x 时采用 y 样式。
  • 我希望在小设备上将菜单收合，大设备则展开（隐藏）
  • 我希望在小设备上显示 1 列但在大设备上显示 3 列（改变布局）

可以留意到专注点都是在于观察设备尺寸的变化并套用不同的样式，这样制作 RWD 网页的方式伴随我们很长一段时间，但如果希望样式变换发生在特定网页元素上呢？ 就只通过设备尺寸来改变样式，弹性就显得不足。

随着网页组件化的发展，我们倾向构建网页组件并灵活适应各种设备尺寸而不再像早期 AWD 强调针对特定设备提供特定的设计🔗，这也是为什么已经有了 Media Queries 却还需要再推出 Container Queries 的原因——「观察特定网页元素的变化并套用不同的样式」，也就是：

x 元素在 y 尺寸时采用 z 样式。

如何使用 Container Queries

有了 Container Queries，开发者们能够真正的针对个别网页元素制定样式，它提供更高的弹性去选择要观察的元素尺寸并在达成条件时套用样式。

首先，需要定义一个非 inline 的元素作为「容器」，默认情况下，没有任何元素是容器，这样才就可以控制哪个元素是「容器」。

inline-size vs size

当你定义一个容器上下文时，会使用 container-type 属性并给它一个 inline-size 或 size 的值。这个属性的默认值是 normal，也可以被设置以便在需要时取消容器。

  • inline-size：容器的宽由容器决定、高度由内容决定。
  • block-size：容器的高与宽都由容器决定，如果没有设置则会退回默认为 0。

大多时候指定容器的高并没有意义，因为容器的高度通常是由内容来决定的，所以绝大多数只会使用到 inline-size 属性设置容器。

.container-element {
  container-type: inline-size;
}

默认使用

一旦设置了容器，就可以在容器内的任何元素上使用新的 @container。

@container (min-width: 30em) {
  .child-element {
    font-size: 1rem;
  }
}

命名容器

如果有很多容器，赋予它们名称是一个明确指定容器的好方法。虽然不是绝对必要的，因为它会默认目标最近的父容器。

.container-element {
  container-name: card;
  container-type: inline-size;


  /* 简写如下 */
  container: card / inline-size;
}

你可以在查询中直接引用命名的 Container Queries。

@container card (min-width: 50em) {
  .child-element {
    font-size: 1rem;
  }
}

容器查询长度单位

在容器内可以使用 Container Query Length Unit🔗 来取得容器相关的信息，例如说容器的宽高。

  • cqw🔗: 1% Query Container 的宽
  • cqh🔗: 1% Query Container 的高
  • cqi🔗: 1% Query Container 的 inline 大小
  • cqb🔗: 1% Query Container 的 block 大小
  • cqmin🔗: 容器的行内尺寸（inline size）或块尺寸（block size）中较小值的 1%
  • cqmax🔗: 容器的行内尺寸（inline size）或块尺寸（block size）中较大值的 1%

Container Queries 不会取代 Media Queries

既然 Container Queries 可以更为灵活地选择网页中的元素，那还有什么理由去使用 Media Queries 呢？其实这两者并不是取代而是互补的关系，在某些场合下你还是会需要根据设备尺寸来调整样式，举例来说：通过 Media Queries 调整整体网页中的变量。像是以下示范使用 Media Queries 改变全局 CSS 变量，除了颜色外也有许多可能性：字体大小、间距……等与设备尺寸紧密关联的样式。

:root {
  --bg-color: red;
}


@media (800px < width) {
  :root {
    --bg-color: green;
  }
}

总结

  • Media Queries：易于指定整体页面样式
  • Container Queries：易于指定个别元素在不同尺寸时的样式

大力推荐 Ahmad Shadeed 的文章：An Interactive Guide to CSS Container Queries🔗 有互动式的教学范例与所有常见的 Container Queries 应用场景。

延伸阅读