CSS `Custom Media Queries` (自定义媒体查询) (提案)：简化复杂媒体查询

各位前端的英雄们，早上好/下午好/晚上好！今天咱们不聊妹子，聊点更刺激的——CSS Custom Media Queries（自定义媒体查询），一个能让你摆脱媒体查询噩梦，代码变得更优雅的秘密武器。准备好，让我们一起深入这个神奇的领域！

什么是Custom Media Queries？

简单来说，Custom Media Queries就是允许你给一坨媒体查询规则起一个响亮的名字。以后你想用这坨规则，直接喊名字就行，不用再复制粘贴那一大段代码了。这就像给你的函数起个名字一样，调用的时候方便多了。

为什么要用Custom Media Queries？

你有没有遇到过这种情况：

• 媒体查询代码冗余： 同样的一组媒体查询规则，在不同的地方重复出现，改一个地方要改十个地方，简直是噩梦。
• 代码可读性差： 一长串的 (min-width: 768px) and (orientation: landscape) and (hover: hover)，看得你头昏眼花，维护起来简直要命。
• 难以维护： 如果你需要修改某个媒体查询的阈值，你需要找到所有使用这个阈值的地方，然后逐一修改，稍不留神就会出错。

Custom Media Queries就是来解决这些问题的。它可以：

• 提高代码复用性： 定义一次，到处使用，避免重复代码。
• 增强代码可读性： 用有意义的名字代替复杂的媒体查询规则，让代码更易于理解。
• 方便维护： 修改Custom Media Query的定义，所有使用它的地方都会自动更新，减少出错的风险。

如何使用Custom Media Queries？

Custom Media Queries使用 @custom-media 规则来定义，语法如下：

@custom-media --screen-medium (min-width: 768px);
@custom-media --screen-large (min-width: 1024px);
@custom-media --landscape (orientation: landscape);
@custom-media --hover (hover: hover) and (pointer: fine);

• @custom-media：声明这是一个Custom Media Query。
• --screen-medium：这是你给这个媒体查询起的名字，必须以两个连字符 -- 开头，这是一个CSS变量的命名规范。你可以自由发挥，取一个有意义的名字。
• (min-width: 768px)：这是实际的媒体查询规则，可以是任何有效的媒体查询表达式。

定义好Custom Media Query之后，你就可以在 @media 规则中使用它了：

@media (--screen-medium) {
  /* 在屏幕宽度大于等于768px时应用的样式 */
  .container {
    width: 750px;
  }
}

@media (--screen-large) and (--landscape) {
  /* 在屏幕宽度大于等于1024px且横屏时应用的样式 */
  .container {
    width: 960px;
  }
}

@media not (--hover) {
  /* 在不支持hover或鼠标指针不精确的设备上应用样式 */
  .button {
    padding: 10px 20px;
  }
}

是不是感觉清爽多了？代码也更易于理解了。

Custom Media Queries的高级用法

Custom Media Queries不仅仅可以定义简单的媒体查询规则，还可以定义更复杂的规则，甚至可以与其他Custom Media Queries组合使用。

1. 组合使用:

@custom-media --screen-medium (min-width: 768px);
@custom-media --screen-large (min-width: 1024px);
@custom-media --screen-medium-up (--screen-medium); /* 直接引用 */
@custom-media --screen-large-up (min-width: 1024px); /* 效果一样 */

@media (--screen-medium-up) {
  /* 在屏幕宽度大于等于768px时应用的样式 */
  .container {
    width: 750px;
  }
}

--screen-medium-up 和 --screen-medium 的效果是一样的，它仅仅是引用了之前的定义。如果你要创建一系列的媒体查询，仅仅阈值不同，这样可以避免重复定义，非常方便。

2. 使用逻辑运算符:

@custom-media --screen-small (max-width: 767px);
@custom-media --screen-medium (min-width: 768px) and (max-width: 1023px);
@custom-media --screen-large (min-width: 1024px);
@custom-media --small-or-large (not (--screen-medium)); /* 屏幕既不是medium */

@media (--small-or-large) {
  /* 屏幕是small或者large时应用的样式 */
  body {
    font-size: 16px;
  }
}

--small-or-large 定义了屏幕不是medium时应用的样式，相当于 (max-width: 767px) or (min-width: 1024px)，虽然逻辑比较绕，但是可以实现更复杂的媒体查询需求。

3. 配合CSS变量使用:

虽然Custom Media Queries本身不能直接使用CSS变量，但是我们可以通过一些技巧来实现类似的效果。例如，可以使用CSS变量来控制媒体查询的阈值：

:root {
  --breakpoint-medium: 768px;
  --breakpoint-large: 1024px;
}

@custom-media --screen-medium (min-width: calc(var(--breakpoint-medium) * 1px));
@custom-media --screen-large (min-width: calc(var(--breakpoint-large) * 1px));

@media (--screen-medium) {
  /* 在屏幕宽度大于等于768px时应用的样式 */
  .container {
    width: 750px;
  }
}

@media (--screen-large) {
  /* 在屏幕宽度大于等于1024px时应用的样式 */
  .container {
    width: 960px;
  }
}

这样，你只需要修改CSS变量的值，就可以改变媒体查询的阈值，非常方便。需要注意的是，这里使用了 calc(var(--breakpoint-medium) * 1px) 来将CSS变量的值转换为像素值，因为媒体查询需要具体的数值。

Custom Media Queries的兼容性

虽然Custom Media Queries很强大，但是它的兼容性并不完美。截至目前，主流浏览器对Custom Media Queries的支持情况如下：

浏览器	支持情况
Chrome	支持
Firefox	支持
Safari	支持
Edge	支持
Internet Explorer	不支持

也就是说，如果你需要兼容IE浏览器，你需要使用一些polyfill或者PostCSS插件来实现Custom Media Queries的功能。

使用PostCSS插件实现Custom Media Queries

PostCSS是一个强大的CSS预处理器，它可以通过插件来扩展CSS的功能。有很多PostCSS插件可以用来实现Custom Media Queries的功能，例如 postcss-custom-media。

1. 安装PostCSS和postcss-custom-media：

npm install postcss postcss-cli postcss-custom-media --save-dev

2. 配置PostCSS：

创建一个 postcss.config.js 文件，并添加以下内容：

module.exports = {
  plugins: [
    require('postcss-custom-media')
  ]
}

3. 使用Custom Media Queries：

在你的CSS文件中使用Custom Media Queries，就像上面介绍的那样。

4. 编译CSS：

使用PostCSS编译你的CSS文件：

postcss input.css -o output.css

PostCSS会自动将Custom Media Queries转换为标准的媒体查询规则，从而实现兼容性。

最佳实践

• 命名规范： 使用有意义的名字来命名Custom Media Queries，例如 --screen-small、--screen-medium、--screen-large 等。
• 避免过度抽象： 不要过度使用Custom Media Queries，只在需要复用或者增强代码可读性的情况下使用。
• 注释： 在定义Custom Media Queries时添加注释，说明它的作用和使用场景。
• 保持一致性： 在整个项目中保持Custom Media Queries的使用风格一致。

示例：一个完整的响应式布局示例

假设我们要创建一个响应式的布局，需要支持以下几种屏幕尺寸：

• 小屏幕： 宽度小于768px
• 中等屏幕： 宽度大于等于768px且小于1024px
• 大屏幕： 宽度大于等于1024px

我们可以使用Custom Media Queries来定义这些屏幕尺寸：

:root {
  --breakpoint-medium: 768px;
  --breakpoint-large: 1024px;
}

@custom-media --screen-small (max-width: calc(var(--breakpoint-medium) - 1px));
@custom-media --screen-medium (min-width: calc(var(--breakpoint-medium) * 1px)) and (max-width: calc(var(--breakpoint-large) - 1px));
@custom-media --screen-large (min-width: calc(var(--breakpoint-large) * 1px));

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

@media (--screen-medium) {
  .container {
    width: 750px;
  }
}

@media (--screen-large) {
  .container {
    width: 960px;
  }
}

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  width: 100%;
  padding: 10px;
}

@media (--screen-medium) {
  .grid-item {
    width: 50%;
  }
}

@media (--screen-large) {
  .grid-item {
    width: 33.333%;
  }
}

在这个示例中，我们定义了三个Custom Media Queries：--screen-small、--screen-medium 和 --screen-large，分别对应不同的屏幕尺寸。然后，我们使用这些Custom Media Queries来设置容器的宽度和网格项的宽度，从而实现响应式布局。

Custom Media Queries的优势总结

优势	描述	示例
代码复用	避免重复编写相同的媒体查询规则，提高代码复用性。	定义一个 --screen-medium，在多个地方使用。
代码可读性	使用有意义的名字代替复杂的媒体查询规则，让代码更易于理解。	用 --screen-medium 代替 (min-width: 768px)。
方便维护	修改Custom Media Query的定义，所有使用它的地方都会自动更新，减少出错的风险。	修改 --breakpoint-medium 的值，所有使用 --screen-medium 的地方都会自动更新。
逻辑抽象	可以将复杂的媒体查询逻辑抽象成一个简单的Custom Media Query，方便使用和维护。	定义一个 --small-or-large 来表示屏幕既不是medium。
配合CSS变量使用	可以配合CSS变量来控制媒体查询的阈值，实现更灵活的响应式布局。	使用 --breakpoint-medium 来控制 --screen-medium 的阈值。

总结

Custom Media Queries是一个强大的工具，可以帮助你简化复杂的媒体查询，提高代码的可读性和可维护性。虽然它的兼容性还有待提高，但是通过PostCSS等工具，我们仍然可以在实际项目中使用它。希望今天的讲座能让你对Custom Media Queries有一个更深入的了解，并在你的下一个项目中尝试使用它。记住，写代码不仅仅是为了让机器理解，更是为了让你的同事和未来的自己也能轻松理解。

各位，下课！ 咱们下次再聊！