在前端开发中，有时候需要做响应式布局，也就是根据设备不同的屏幕宽度，适配不同的样式，这时候就需要用到媒体查询。媒体查询可以很方便的根据设备的屏幕宽度来设置样式，不过媒体查询的语法很繁琐，而且当我们需要根据屏幕宽度做一些小的变化时，也很难管理。这时候就需要用到 postcss-media-properties 这个 npm 包，它可以简化媒体查询的语法。
什么是 postcss-media-properties
postcss-media-properties 是一个可以优化和简化媒体查询的 CSS 插件，它可以让你的 CSS 代码更加简洁易读。
如何使用 postcss-media-properties
安装 postcss-media-properties
首先需要通过 npm 安装 postcss-media-properties：
npm install postcss-media-properties --save-dev
使用 postcss-media-properties
安装完成后，在 CSS 文件中使用 @apply 规则引用 mixin，像这样：
-- -------------------- ---- -------
-------- -
------ -------- -
------ ----
-
-
------ ---------- -
-------- -
------ ----
-
-这个代码的作用是，当屏幕宽度小于等于 480px 时，.example 的字体颜色就变成了红色。其中 --mobile 表示 480px 的媒体查询，它实现的代码可以重复使用，大大简化了代码的编写。
除了 --mobile，也可以使用其他的 mixin，比如 --tablet，--desktop 等等。这个 mixin 的具体定义，可以在 postcss-media-properties 的文档中查找。
配置 postcss-media-properties
要想使用 postcss-media-properties，还需要在项目的 postcss.config.js 配置文件中进行配置。具体代码如下：
-- -------------------- ---- -------
-------------- - -
-------- -
--------------------------- -
------------ -
----------- ------- --- ----------- --------
----------- ------- --- ----------- ------ --- ----------- --------
------------ ------- --- ----------- -------
-
-
-
-这个配置文件的主要作用是将 --mobile，--tablet 和 --desktop 定义为自定义的 CSS 变量。
现在，你就可以在 CSS 中使用这些 mixin 来简化媒体查询了。
示例代码
-- -------------------- ---- -------
-- -- ----- --
----- -
--------- ------ --- ----------- -------
--------- ------ --- ----------- ------ --- ----------- -------
---------- ------ --- ----------- -------
-
-- -- ----- --
-------- -
------ -------- -
------ ----
-
------ -------- -
------ ------
-
------ --------- -
------ -----
-
-总结
通过使用 postcss-media-properties，可以大大简化媒体查询的语法，让你的 CSS 代码更加清晰易读。此外，定义 mixin 可以让你的代码重复使用，进一步简化了代码的编写。如果你想要让你的前端开发更加高效，可以尝试使用这个 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c5a81e8991b448ebdad