媒体查询为开发者提供了一种强大的方式，可以为网站访问者提供最佳的网络体验，无论用户的设备类型或尺寸如何。例如，媒体查询可以用来根据设备的屏幕尺寸自动调整文档或其元素的样式。
PostCSS的JavaScript插件可以用来有效地实现媒体查询。这个工具使开发者能够编写CSS预处理程序或后处理程序。PostCSS可以处理各种任务，如对CSS进行提示，转译未来的CSS语法，显示内联图像，以及支持混合元素和变量。不同项目的开发需求会有很大不同，但幸运的是，有几个PostCSS插件可用。
在这篇文章中，我们将回顾一下Media Queries Level 4中的几个功能。我们将使用PostCSS来演示每个功能的实现。在撰写本文时，Media Queries Level 5仍在起草中。
我们将在文章中使用Codepen来演示例子。这个在线代码编辑器使我们能够保持简单，随时查看我们的输出，并避免使用任何类型的CSS或JavaScript框架。
让我们开始吧!
为Codepen设置PostCSS
如果您没有Codepen账户，您可以在这里创建一个。
要为Codepen的演示设置PostCSS，请遵循以下五个步骤。
- 点击侧边栏的Pen，创建一个新的笔。
- 点击 "设置"按钮，打开这个模式。
- 从侧边栏中选择CSS，以显示不同的CSS设置。
- 从CSS 预处理器的下拉菜单中，选择PostCSS。在CSS Base下，选择Normalize。然后，在Vendor Prefixing下，选择Autoprefixer。
Autoprefixer是一个PostCSS插件，它使用Can I Use中的值，不需要再写供应商前缀。这节省了时间，并有助于保持代码的简洁。
点击模版右上方的**需要插件吗？**徽章，显示可用的PostCSS插件的列表。在整个教程中，我们将直接在代码中添加其中的几个插件。
- 选择保存并关闭。
用PostCSS实现媒体查询第4级功能
现在，让我们来探讨一些最有趣的媒体查询第四级功能。当我们回顾每个功能时，我们会看一下用PostCSS插件编写的示例代码。
pointer
pointer 媒体功能对于检查指向性设备（如鼠标或触摸屏）的存在和准确性非常有用。它还可以用来根据用户设备中存在的指针类型来编写媒体查询。
pointer 有三个可用的值：none,coarse, 和fine 。
下面的代码使用postcss-custom-media 插件，当检测到coarse （或不太精确）的指针类型时，使单选按钮和复选框变大。
@use postcss-custom-media;
@custom-media --pointer-check (pointer: coarse);
@media (--pointer-check) {
input[type="checkbox"], input[type="radio"] {
min-width:30px;
min-height:40px;
background:transparent;
}
}
range
range 媒体功能使我们能够根据用户设备在特定尺寸的最小值和最大值内的情况来调整显示。
下面的代码使用postcss-media-minmax 插件来改变一个display 的样式，用于指定width 范围内的用户设备屏幕。
@use postcss-media-minmax;
@media screen and (500px <= width <= 1200px) {
.bar {
display: block;
}
}
color
color 媒体功能使我们能够测试视觉设备的每个颜色成分（红、绿、蓝）的比特数。单色设备将有一个零的值。
下面的代码使用postcss-media-minmax 插件，为每个颜色分量至少有8 位的用户设备显示指定的样式。
/* This media query expresses that a style sheet applies to color devices with at least 8 bits per color component */
@use postcss-media-minmax;
@media (color >= 8) { … }
resolution
resolution 媒体功能允许我们检查任何输出设备的像素密度。这使我们能够在向用户渲染内容时管理显示质量。
下面的代码使用postcss-media-minmax 插件，根据用户输出设备的像素密度来调整文本resolution 。
@use postcss-media-minmax;
@custom-media --exact-resolution (resolution: 150dpi);
@custom-media --min-resolution (min-resolution: 72dpi);
@custom-media --max-resolution (max-resolution: 300dpi);
/* Exact resolution */
@media (--exact-resolution) {
p {
color: red;
}
}
/* Minimum resolution */
@media (--min-resolution) {
p {
text-decoration: underline;
}
}
/* Maximum resolution */
@media (--max-resolution) {
p {
background: yellow;
}
}
hover
hover 媒体查询为我们提供了一个原生的CSS解决方案，用于测试用户设备上的触摸支持。它检查用户的主要输入设备是否可以悬停在HTML元素上。
例如，下面的代码使用postcss-custom-media 插件来显示hover-激活的下拉菜单，只有当该功能在用户的设备上是可用的。
@use postcss-custom-media;
@custom-media --hover-check (hover);
@media ((--hover-check)) {
.menu > li {display:inline-block;}
.menu ul {display:none; position:absolute;}
.menu li:hover ul {display:block; list-style:none; padding:0;}
/* ... */
}
媒体查询第四级也允许使用逻辑运算符，如and,not, 和only 。在上面的例子中，使用not 将否定媒体功能。换句话说，not(--hover-check) 将只匹配缺乏悬停功能的视觉设备。
update
当我们想评估用户的输出设备修改渲染内容的外观的能力时，CSS的update 媒体特性就会发挥作用。这个特性对于帮助确定网页内容所需的功能类型特别有用，它是基于用户的输出设备。
update 媒体特征接受三个值：none,slow, 和fast 。
作为一个例子，考虑到一个网页上的链接在悬停时有下划线。如果该网页被下载或打印，将这些链接显示为下划线可能会有帮助。
下面的代码使用postcss-custom-media 插件来检查悬停时有下划线的链接，然后总是用underline 来显示它们。
@use postcss-custom-media;
@custom-media --update-check (update);
@media (--update-check) {
a { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
}
/* In non-updating output devices, the links are always underlined. */
结语
在这篇文章中，我们介绍了如何使用PostCSS与pointer 、range 、color 、resolution 、hover 和update ，这些功能在Media Queries Level 4中都可以使用。PostCSS是一个加强CSS工作流程的有用工具。它的速度非常快，而且由于有大量可用的插件生态系统，其命名语法被大大简化。
请查看PostCSS文档，以获得更多信息，帮助你利用PostCSS的力量。关于媒体查询第四级功能的细节，可以在其文档和MDN上找到。
