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	是否添加单位