postcss-adapt-mobile

it`s a plugin of postcss. it can transform px to rem for adapt in mobile. the base lib is flexible.js

Usage no npm install needed!

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

README

移动端自适应方案(postcss插件)

描述

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

一个不成熟的小建议

这个插件结合flexible.js库实现移动端自适应还是很有趣的,方式虽然不先进，但绝对好用。

用例

    width: 1080px;
    transfrom to:  width: 10rem;

安装

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

默认配置

    {
        viewportWidth: 1080,        // 设计稿宽度
        unitPrecision: 5,           // 转换为rem后的数值小数点位数
        minPixelValue: 1,           // 小于1像素的值不进行单位转换
        viewportUnit: "rem",        // 转换后的单位
        uncoverSelectors: []        // 不进行转换的选择器
    }

配置方式

  • 在postcss.config.js中:
    module.exports = {
          "plugins": {
            "postcss-adapt-mobile": {
              "viewportWidth": 1080,
              "unitPrecision": 5,
              "minPixelValue": 1,
              "viewportUnit": "rem",
              "uncoverSelectors": []
            }
          }
        }
  • 在package.json中:
      {
      "postcss": {
          "plugins": {
            "postcss-adapt-mobile": {
                "viewportWidth": 1080,
                "unitPrecision": 5,
                "minPixelValue": 1,
                "viewportUnit": "rem",
                "uncoverSelectors": []
            }
          }
        }
  }