dylan-rem

这是专为移动端开发设计监听 window resize 改变自动设置 html 的 fontsize 大小。配置插件 postcss 进行将 px 转为 rem 的移动端开发工具库

Usage

安装

npm install dylan-rem

在项目入库文件中引入 dylan-rem 并初始化

import  dylanRem  from 'dylan-rem';

dylanRem.init({
  designWidth: 375,   // 设计稿宽度
  rootValue: 37.5,    // html基础fontSize大小
  maxRatio: 2         // 运行缩放最大比例
});

配合 postcss 插件进行 css 单位转换，请参阅

# 安装
npm install postcss-pxtorem autoprefixer -S


# postcss.config.js
module.exports = {
    plugins: {
        autoprefixer: require('autoprefixer'),
        'postcss-pxtorem': {
            rootValue: 37.5,      // 设计稿宽度 375
            propList: ['*']
        }
    }
}

API

init

初始化页面配置

类型

init(config: { rootValue?: number; designWidth?: number; maxRatio?: number }): void;

参数

参数 | 类型 ---|--- option | Option

Option

参数 | 类型 | 必填 | 默认值 | 说明 ---|---|---|---|--- designWidth | number | 否 | 375 | 设计稿宽度 rootValue | number | 否 | 37.5 | 根字体大小 maxRatio | number | 否 | 2 | 最大缩放比例

px2Rem

px转换位rem

类型

px2Rem(px: string | number, addUnit?: boolean): number | string;

参数

参数 | 类型 | 必填 | 默认值 | 说明 ---|---|---|---|--- px | string / number | 是 | | 需要转换的px数值 addUnit | boolean | 否 | false | 是否添加单位

rem2Px

rem转换为px

类型

rem2Px(rem: string | number, addUnit?: boolean): number | string;

参数

参数 | 类型 | 必填 | 默认值 | 说明 ---|---|---|---|--- rem | string / number | 是 | | 需要转换的rem addUnit | boolean | 否 | false | 是否添加单位