随着移动设备和桌面设备不断增多，Web 开发者需要考虑响应式设计和适应各种设备的屏幕大小。而 media queries 是实现响应式设计的关键。为了确保 media queries 能够正确工作并适应用户的屏幕大小，我们需要使用一种有效的方法来验证它们的语法和正确性。
在本文中，我们将介绍一个流行的 NPM 包 valid-media-queries，并提供使用教程，让初学者掌握它的使用方法。
什么是 valid-media-queries？
valid-media-queries 是一个 NPM 包，它可以帮助我们验证 media queries 的有效性。该包可以解析所有合法的 CSS media queries，并返回 true 或 false。这样，我们可以确定当前设备的屏幕大小是否满足指定的 media queries。
valid-media-queries 的主要功能包括：
- 验证所有合法的 media queries 的语法
- 支持所有 CSS media features
- 可以将 media queries 分解成语法树，方便我们进一步处理和检查
如何使用 valid-media-queries？
安装
首先，在使用 valid-media-queries 之前，我们需要通过 NPM 安装该包。在命令行中输入以下命令即可：
npm install valid-media-queries --save
验证 media queries
一旦我们安装了 valid-media-queries，我们就可以开始验证 media queries 了。假设我们有一个 media query，如下所示：
@media only screen and (max-width: 600px) {
body {
background-color: yellow;
}
}我们可以使用以下代码验证它：
var validMediaQuery = require('valid-media-queries');
console.log(validMediaQuery('@media only screen and (max-width: 600px)')); // 返回 true如果 media query 语法正确，则返回 true；否则返回 false。
解析 media queries
除了验证 media queries 的语法，valid-media-queries 还可以将它们分解成语法树，以便我们进行进一步处理和检查。以下是一个示例：
var validMediaQuery = require('valid-media-queries');
var query = '@media only screen and (max-width: 600px) { body { background-color: yellow; } }';
var result = validMediaQuery.parse(query);
console.log(result);{ mediaType: 'screen',
expressions:
[ { feature: 'max-width', expression: '600px' } ] }筛选通过的 media queries
现在，我们已经学习了如何验证 media query 的语法和如何将它们分解为语法树。但有时候，我们只想筛选通过的 media query。
我们可以在 CSS 中添加 .only-screens 类，然后在 JavaScript 中按如下方式验证：
-- -------------------- ---- -------
--- --------------- - -------------------------------
--- --- - -
------------- -
-------- -----
-
------ ---- ------ --- ----------- ------ -
------------- -
-------- ------
-
-
--
--- ------ - ----------------------------
-------------------- -- -- -------------- - -------- ------ --我们应该把验证代码放在应用程序的初始化代码中，这样我们就可以查询当前屏幕大小是否符合指定的 media queries，然后进行相应的处理或操作。
总结
在本文中，我们介绍了一个流行的 NPM 包 valid-media-queries，并提供了使用教程。通过这个包，我们可以验证 media query 的语法、分解 media query 成语法树以及筛选出通过的 media query。这些方法可以帮助我们更方便地开发响应式网页，使其适应不同大小的屏幕。希望这篇文章能够帮助你更好地使用 valid-media-queries。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5ef0a8fcefcef77a054b75fa