介绍
在前端开发中，我们常常需要使用媒体查询（Media Queries）来实现响应式布局。使用媒体查询可以根据设备的屏幕尺寸、分辨率等信息，为页面提供不同的样式表。然而，当需要定义多个媒体查询时，样式表就会变得冗长且难以维护。
rework-custom-media 是一个依赖于 rework 的 npm 包，它提供了一种更加灵活的方式来定义媒体查询。
本文将介绍如何安装和使用 rework-custom-media，并提供一些示例代码帮助你更好地理解其使用方法。
安装
首先，我们需要安装 rework 和 rework-custom-media：
npm install rework rework-custom-media --save-dev
使用方法
定义自定义媒体查询
要使用 rework-custom-media，我们首先需要定义自定义媒体查询（Custom Media）。自定义媒体查询类似于 CSS 中的媒体查询，但可以使用自己定义的名称。
下面是一个使用 rework-custom-media 定义自定义媒体查询的示例代码：
-- -------------------- ---- ------- ----- ------ - ------------------ ----- ----------- - ------------------------------- ----- --- - - ------------- ---------------- ----------- ------ ------------- ----------------- ----------- ----- --- ----------- ------ -- ----- --------- - ----------- -------------------- ----------------------------------
在上面的代码中，我们定义了两个自定义媒体查询 --small-viewport 和 --medium-viewport。这两个媒体查询分别表示视口宽度小于等于 30em 和大于 30em 且小于等于 60em。
使用自定义媒体查询
定义自定义媒体查询后，我们就可以在样式表中使用这些媒体查询了。下面是一个使用自定义媒体查询的示例代码：
-- -------------------- ---- -------
----- ------ - ------------------
----- ----------- - -------------------------------
----- --- - -
------------- ---------------- ----------- ------
------------- ----------------- ----------- ----- --- ----------- ------
---- -
------ -----
------ ------------------ -
---------- -------
-
------ ------------------- -
---------- -------
-
-
--
----- --------- - -----------
--------------------
----------------------------------在上面的代码中，我们定义了一个 .box 类，它的宽度为 100%。在 .box 类内部，我们使用了两个自定义媒体查询 --small-viewport 和 --medium-viewport。当视口宽度满足这些媒体查询时，.box 类会分别应用不同的字体大小。
变量传递
在实际使用中，我们可能需要将变量传递给自定义媒体查询。下面是一个传递变量的示例代码：
-- -------------------- ---- -------
----- ------ - ------------------
----- ----------- - -------------------------------
----- --- - -
------------- ---------------- ----------- -----------------
------------- ----------------- ----------- ---------------- --- ----------- ------------------
---- -
------ -----
------ ------------------ -
---------- -------
-
------ ------------------- -
---------- -------
-
-
--
----- --------- - ----------- - ---------- -
----------------- -------
------------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------