简介
postcss-quantity-queries 是一款基于 PostCSS 的 npm 包，可以方便地为 CSS 属性的数量值添加对应的媒体查询。比如，我们可以使用该包将：
p {
font-size: 16px;
line-height: 1.5;
}转化为：
-- -------------------- ---- -------
- -
---------- -----
------------ ----
-
------ ----------- ------ -
- -
---------- -----
-
-
------ ----------- ------ -
- -
------------ ----
-
-
------ ----------- ------- -
- -
---------- -----
-
-这样做的好处就是可以针对不同宽度的屏幕设置不同的 CSS 属性值，从而提高页面的响应能力。
使用方法
安装 postcss-quantity-queries：
npm install postcss-quantity-queries --save-dev
在 PostCSS 配置文件中使用该插件：
const postcss = require('postcss'); const quantityQueries = require('postcss-quantity-queries'); const plugins = [ quantityQueries() ]; postcss(plugins);在 CSS 中使用带有数量值的属性，插件将自动生成媒体查询：
-- -------------------- ---- ------- - - ---------- ----- -------------- ---- ------ ----------- ------ - ---------- ----- - ------------ ---- ----------------- --- ------ ----------- ------ - ------------ ---- - --------------- ---- ------ ----------- ------- - ---------- ----- - -
参数说明
postcss-quantity-queries 插件还提供了一些参数可以配置，以支持更复杂的使用场景：
propertyNameRegexp
类型：RegExp，默认值：/^(.?)((mq\d))$/
设置用于匹配属性名称的正则表达式。例如，如果您要在属性名中使用 @media-query 而不是 (mqX) 的前缀，则可以将其设置为 /@media (.?)!((mq\d))/。
propertyValueRegexp
类型：RegExp，默认值：/^(.*?) !?((.?)) (.)$/
设置用于匹配属性值的正则表达式。例如，如果您要在属性值中使用 (@media-query: X) 的格式，而不是 !important，那么您可以将其设置为 /^(.*?) *(@media-query: (.?)) (.)$/。
unit
类型：String，默认值：'px'
设置媒体查询使用的单位。默认为像素。
steps
类型：Array，默认值：[640, 768, 1024]
设置媒体查询的阈值集合。默认为 [640, 768, 1024]。
示例代码
下面是一个完整的使用示例，假设您有一个值为 16px 的字体大小，在某个屏幕宽度下要设置为 20px：
p {
font-size: 16px;
font-size(mq): 20px @media (min-width: 1000px) {
font-size: 20px;
}
}在这个例子中，我们使用了 postcss-quantity-queries 插件中自带的默认参数，用它生成了符合 CSS 规范的媒体查询语句，最终生成的 CSS 代码如下：
-- -------------------- ---- -------
- -
---------- -----
-
------ ----------- ------- -
- -
---------- -----
-
-可以看到，在宽度为 1000px 以上时，字体大小会变为 20px，从而让您的网站更加响应式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64160