dper-adapt

it`s a plugin of postcss, it can transform that the size of your code like wpx or px or hpx to vw or vh for adapt screen

Usage no npm install needed!

<script type="module">
  import dperAdapt from 'https://cdn.skypack.dev/dper-adapt';
</script>

README

可视化-自适应方案

此项目旨在简化可视化自适应开发以及样式编写过程中的代码简化,此项目实际为Postcss插件，下边是相关配置

使用方式

安装此依赖包后，在编写样式时有如下变化:

 转换前  width: 1920px;
 转换后  width: 100vw;
 
 转换前  width: 1080hpx;
 转换后  width: 100vh;

ps: 对vw与vh不了解的，点击此处查看

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

以上配置为默认值

viewportWidth: 视口宽度
viewportHeight: 视口高度
unitPrecision: 转换后数值保留小数点位数
viewportUnitWidth: 宽度转换后的单位
viewportUnitHeight: 视口宽度
uncoverSelectors: 不进行转换的选择器
fixedSize: 是否转换成固定尺寸，解除自适应