postcss-dpr

A PostCSS plugin. Generate CSS media queries for values in unit of pixel according to dpr option.

Usage no npm install needed!

<script type="module">
  import postcssDpr from 'https://cdn.skypack.dev/postcss-dpr';
</script>

README

PostCSS插件，根据设置的 DPR，为 PX 单位的值生成适配的 Media Query 代码，并追加到 CSS 中。

配置参数

  • dprList
    • 类型：数组
    • 描述：适配的 DPR 列表
    • 默认： []
  • propList
    • 类型：数组
    • 描述：属性白名单，只有在此名单中的属性才会适配
    • 默认：[]
  • skipComment
    • 类型：字符串
    • 描述：个别声明不需要处理的时候，在该声明结束后以此文本作为注释，如：/*__skip*/（也可以写作 /*!__skip*/），即可跳过适配该声明。此注释将在生成的CSS中被移除
    • 默认：__skip
  • mediaQuery

    • 类型：函数

    • 描述：返回字符串作为媒体查询的条件，前面不要加 @media

    • 默认：

       const defaultMediaQuery = function(dpr) {
     return ['only screen and (-webkit-device-pixel-ratio: ' + dpr + ')',
             'only screen and (-moz-device-pixel-ratio: ' + dpr + ')',
             'only screen and (device-pixel-ratio: ' + dpr + ')',
             'only screen and (resolution: ' + 96*dpr + 'dpi)',
             'only screen and (resolution: ' + dpr + 'dppx)'
     ].join();
 };
  • appendCSS
    • 类型：布尔值
    • 描述：是否向CSS中插入生成的媒体查询
    • 默认：true
  • dealWith
    • 类型：函数
    • 描述：插件在数据分析完毕后，将此函数作为回调，传入一个参数，该参数的 file 属性为CSS文件路径，rules 属性为需要适配的规则和声明。此函数使得用户可以处理额外的需求
    • 默认：null

在 example 中，有一个在 Gulp 中使用插件的小 Demo，使用了以上全部功能，可供参考。