随着 web 前端开发的快速发展，对样式的要求也越来越高，媒体查询是开发过程中不可避免的一部分。在媒体查询的实现过程中，不同设备的像素密度与屏幕尺寸的不同会导致代码难以维护，这时候我们需要用到 postcss-scale-media-query 这个 npm 包。
简介
postcss-scale-media-query 是一个 postcss 插件，用于将媒体查询规则中的像素值转换为 em 或 rem，并且还可以根据不同的设备密度以及屏幕宽度进行反比例缩放。
安装和使用
使用 npm 可以非常容易地安装 postcss-scale-media-query。
npm install postcss-scale-media-query
在使用 postcss-loader 时，需要在 webpack.config.js 中加上对于该插件的配置:
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
---------------
-
------- -----------------
-------- -
-------- -
--------------------------------------
--------- -------- -- ------------
------ -- -- -----
--------- ---- -- -------
---------- -- -- ----------
---
--
--
--
-------- ---------------
--
--
--
--此时，postcss-scale-media-query 就已经准备就绪了。
注意事项
- 使用 postcss-scale-media-query 前，需要先引入 postcss。
- 需要注意的是，当转换媒体查询中的像素值为 em 或 rem 时，需要在样式文件开头设定好根元素的 font-size。
示例代码
html 文件：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
----------------------------------------
----- ---------------- -----------------
-------
-------------
-------css 文件：
-- -------------------- ---- -------
-- --------- --
-------- --------
---- -
---------- -----
-
------ ----------- ------ -
---- -
------ ------
------- ------
-
----- -
---------- -----
-
-
------ ----------- ------- -
---- -
------ ------
------- ------
-
----- -
---------- -----
-
-引入 postcss 后，在 postcss-loader 中引入 postcss-scale-media-query 插件即可。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- ---------
---- -
---------------
-
------- -----------------
-------- -
-------- -
--------------------------------------
--------- -------- -- ------------
------ -- -- -----
--------- ---- -- -------
---------- -- -- ----------
---
--
--
--
-------- ---------------
--
--
--
--经过转换后，生成的 css 文件如下所示：
-- -------------------- ---- -------
-- --------- --
-------- --------
---- -
---------- -----
-
------ ----------- ----- -
---- -
------ --------
------- --------
-
----- -
---------- --------
-
-
------ ----------- ----- -
---- -
------ --------
------- -----
-
----- -
---------- ----
-
-总结
使用 postcss-scale-media-query 可以帮助我们快速解决媒体查询的难点，提高代码的可维护性。在 web 前端开发中，熟练掌握这个 npm 包是非常重要且有必要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558ca81e8991b448d6136