npm 是一个用来管理 node.js 依赖关系的工具，可以非常方便的对前端项目中的依赖进行处理和管理。其中，mediaquery-text 包就是一个非常实用的前端工具，它可以用来处理 CSS 中媒体查询的文本操作。
本文将介绍 mediaquery-text 包的使用方法，帮助你更好的掌握这个工具，在前端开发中更加高效和便捷的处理媒体查询的操作。
安装
使用 npm 安装 mediaquery-text 包非常简单，只需要在命令行中键入以下命令即可：
npm install mediaquery-text
安装完成后，在需要使用的地方引入即可：
const mq = require('mediaquery-text');
使用方法
方法1：parse
parse 方法可以把媒体查询文本转换成树形结构，并返回一个 JSON 对象。以下为一段示例代码：
const result = mq.parse('@media (min-width: 600px) and (max-width: 800px) {\n body {\n font-size: 18px;\n }\n}'); console.log(result);
输出的结果为：
-- -------------------- ---- ------- - ------- -------- ----------- - - ------- ------------ -------- ------- -- - ------- ------------ -------- ------- - -- -------- - - ------- ------- ------------ - ------ -- --------------- - - ----------- ------------ -------- ------ - - - - -展开代码
从结果中可以看出，它返回了一个包含 type 、 features 和 rules 属性的 JSON 对象。其中 features 表示媒体查询条件，而 rules 是一个数组，表示查询条件对应的 CSS 样式。
方法2：match
match 方法可以用来判断当前媒体查询是否匹配当前屏幕。以下是一段示例代码：
const result = mq.match('(min-width: 600px) and (max-width: 800px)', window); console.log(result);
代码的意思是判断当前的屏幕是否在 600px 和 800px 之间，返回的结果将是一个布尔值，表示当前屏幕是否匹配媒体查询的条件。
方法3：extract
extract 方法可以用来提取媒体查询条件，并返回一个数组。下面是一段示例代码：
const result = mq.extract('@media (min-width: 600px) and (max-width: 800px) {\n body {\n font-size: 18px;\n }\n}'); console.log(result);
输出的结果为：
['(min-width: 600px) and (max-width: 800px)']
这个方法会把传入的媒体查询文本中的所有媒体查询条件提取出来，并用数组的形式返回。
具体应用场景
根据屏幕大小设置不同样式
本场景下，媒体查询通常用来根据屏幕大小的不同来设置不同的样式。以下是一段示例代码：
-- -------------------- ---- ------- ----- -- - --------------------------- ----- ------ - --------------------- ------ --- ----------- -------- -------- -- -------- - -- ------------- ---------------------------- - ------- - ---- - ---------------------------- - ------- -展开代码
将上述代码放在页面的 script 标签中，以实现按照屏幕大小设置不同的 body 标签字体大小。
媒体查询条件提取
有时候，我们需要从一段包含多个媒体查询文本中，提取出所有的媒体查询条件。这种时候，我们就可以使用 mq.extract 来进行操作。
以下是一段示例代码：
const mq = require('mediaquery-text'); const text = '@media (min-width: 600px) and (max-width: 800px) {\n body {\n font-size: 18px;\n }\n} @media (min-width: 800px) and (max-width: 1000px) {\n body {\n font-size: 20px;\n }\n}'; const result = mq.extract(text); console.log(result);
输出的结果为：
['(min-width: 600px) and (max-width: 800px)', '(min-width: 800px) and (max-width: 1000px)']
通过 mq.extract 方法，我们可以方便的提取出包含媒体查询条件的文本，并方便的进行后续处理。
本文总结
本文主要讲解了 npm 包 mediaquery-text 的使用方法以及具体应用场景。可以看出，该工具非常实用，能够方便的处理和管理前端项目中的媒体查询文本。希望本文能够帮助大家更好的掌握 mediaquery-text ，为前端开发提供更高效便捷的工具支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f35569ddbf7be33b2566ecd
