1.0.10 • Published 4 years ago

high-pxtorem v1.0.10

Weekly downloads
1
License
MIT
Repository
github
Last release
4 years ago

在开发页面的时候我们经常需要把px转成rem,比如:

width:100px;

// 如果 html 的front-size设置成为37.5px;
width:100/37.5rem;// 或者
width:2.666665rem;

这样我们不写注释,可能都不知道原来的px是多少。非常麻烦。 postcss-pxtorem 可以解决这个问题, 基本用法:

var px2rem = require('postcss-plugin-px2rem')

px2rem({
  // base on 750px standard.
  rootValue: 75,
  // to leave 1px alone.
  minPixelValue: 1.01
})

这个插件有一些问题;不能满足我们现在公司的需求,我们公司的页面,既有640的,也有750的。还有可能有些不想转rem;这样的情况上面的插件就无法满足了,于是自己写了一个插件。

Install

$ cnpm install --save-dev high-pxtorem

Usage

/*
---
rootSize:37.5,
noTransformFlag:-no-,
toFixed:6
---
*/

body {
  width: 100px;
  border: 1px solid red;

  a {
    border: 37.5px solid wheat;
  }
}

body{
  width:2.666667rem;
  border:.026667rem solid red
  }
body a{
  border:1rem solid wheat
}

Example

// postcss.config.js
module.exports = {
    syntax: require('postcss-less'),//此处可以换
    plugins: [
        require('postcss-import')(),
        require('postcss-url')(),
        require('autoprefixer')({
            'overrideBrowserslist': [
                '> 0.1%',
                'Android >= 4.1',
                'ios >= 8',
                'not ie < 12'
            ]
        }),
        require('high-pxtorem')({})

    ]
};

options

 var defaultObj = {
        rootSize: '37.5',// 与html font-size相同
        noTransformFlag: '-no-',// 此注释前面不进行rem转义
        toFixed: 6,//精度
        whiteTagList: ['width'],//不转rem的属性,
        whiteSelectorList: ['.a','#app']// 不转rem的选择器
    };
1.0.10

4 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago