postcss-adapt-datav

0.1.4 • Public • Published

可视化自适应方案(postcss插件)

描述

    插件作用于整个项目关联的CSS样式,他会把你编写的样式代码中px的内容转换为vw,
    hpx转换为vh来达到自适应效果;当然,我们提供了uncoverSelectors,minPixelValue等参数
    进行更多定制化的转换规则。
    声明: 与账户rybest为同一作者,原账户将不再更新!

用例

    width: 1920px;
    transfrom to:  width: 100vw;

    height: 1920px;
    transform to: height: 100vw;

    height: 1080hpx;
    transform to: height: 100vh;

安装

    cnpm i -D postcss-adapt-datav
    或者 npm install --save-dev postcss-adapt-datav
    或者 yarn add -D postcss-adapt-datav

默认配置

    {
        viewportWidth: 1920,        // 设计稿宽度
        viewportHeight: 1080,       // 设计稿高度
        unitPrecision: 6,           // 转换后的数值小数点位数
        viewportUnitWidth: "vw",    // px转换后的单位
        viewportUnitHeight: "vh",   // hpx转换后的单位
        uncoverSelectors: [],       // 不进行转换的选择器
        fixedSize: false            // true:转换为固定尺寸项目  false: 自适应项目
    }

配置方式

  • 在postcss.config.js中:
    module.exports = {
              "plugins": {
                "postcss-adapt-datav": {
                  "viewportWidth": 1920,
                  "viewportHeight": 1080,
                  "unitPrecision": 6,
                  "viewportUnitWidth": "vw",
                  "viewportUnitHeight": "vh",
                  "uncoverSelectors": [],
                  "fixedSize": false
                }
              }
            }
    
  • 在package.json中:
      {
          "postcss": {
              "plugins": {
                "postcss-adapt-datav": {
                    "viewportWidth": 1920,
                    "viewportHeight": 1080,
                    "unitPrecision": 6,
                    "viewportUnitWidth": "vw",
                    "viewportUnitHeight": "vh",
                    "uncoverSelectors": [],
                    "fixedSize": false
                }
              }
            }
      }
    

Package Sidebar

Install

npm i postcss-adapt-datav

Weekly Downloads

2

Version

0.1.4

License

MIT

Unpacked Size

6.17 kB

Total Files

4

Last publish

Collaborators

  • ~vdper