PostCSS 媒体查询 Spect-Ratio 数字值

npm install @csstools/postcss-media-queries-aspect-ratio-number-values --save-dev

PostCSS 媒体查询 Spect-Ratio 数字值 允许您使用非整数 calc() 内 aspect-ratio 特性查询 媒体查询 4 规格。 。 。 .

@media (min-aspect-ratio: 1.77) {}

/* becomes */

@media (min-aspect-ratio: 177/100) {}

使用量

添加 PostCSS 媒体查询 Spect-Ratio 数字值 对您的项目:

npm install postcss @csstools/postcss-media-queries-aspect-ratio-number-values --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssMediaQueriesAspectRatioNumberValues = require('@csstools/postcss-media-queries-aspect-ratio-number-values');

postcss([
    postcssMediaQueriesAspectRatioNumberValues(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

选项

保护

这个 preserve 选项决定原始标记是否 被保存下来。 默认情况下,它没有被保存.

postcssMediaQueriesAspectRatioNumberValues({ preserve: true })

@media (min-aspect-ratio: 1.77) {}

/* becomes */

@media (min-aspect-ratio: 1.77),(min-aspect-ratio: 177/100) {}