media-px2rem

0.1.3 • Public • Published

install

$ npm/cmpn install media-pxtorem --save-dev

options

  • rootValue: (Number) 1rem = rootValue; 默认值: 16
  • unitPrecision: (Number) rem的小数点的计算精度;默认值: 5
  • propList: (Array) 需要转化rem的属性,默认值 ["font", "font-size", "line-height", "letter-spacing"]
  • replace: (Boolean) 是否需要替换原有样式,默认值: true,开发阶段建议使用false;
  • mediaQuery:(Boolean) 是否需要替换 媒体查询参数中的px,默认值: false;
  • minPixelValue:(Number) 转化的最小值(px),是基于样式中的px转化的,而不是基于已转换的rem换算px后计算;默认值0
  • exclude: (String, Regexp, Function) ,排除的样式文件路径,默认值: null
  • mediaMinWidth:(Number) 转化的区间的起点(响应方式为移动端优先),默认值:0, 转化所有px; eg: 1024,转化1024以及1024以上的区间;

how to use

  • rem的计算方式:已1920设计稿基准下: 1rem = 48px;以1024等比缩放 1rem = 25.6作为最小值;避免移动端使用自动转化;
  • 建议只针对 1024/1200 以上区间开始rem自动转化,手机端转化等比会导致排版失调: 比如:栏目标题36px , 内容简介16;
  • 内容区按照正常PX实现,避免小屏等比缩放过渡,比如: 1200的内容区,等比缩放内容区会是853.75px;严重影响布局以及预览效果;
  • 合理使用,建议仅 font-size,line-height, padding, margin 做自动转换;
  • 对于自动转化后,区间字体过小,还原度较低的问题,可以在 html动态设置 {font-size: val !important;}的方式调整解决;
  • 如果所有属性转为为rem,可以解决日常提到的等比缩放,以及浏览器放大缩小的问题;

TODO

[] 对于14,16等通用文本的字体大小,不能使用等比的方式处理;

Dependents (0)

Package Sidebar

Install

npm i media-px2rem

Weekly Downloads

3

Version

0.1.3

License

ISC

Unpacked Size

27.4 kB

Total Files

7

Last publish

Collaborators

  • charlotte007