zoukankan      html  css  js  c++  java
  • px-rem 一个将px转换为rem的工具

    将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem

    怎样转换静态文件

    安装:

       npm install px-rem -g

    然后跑下命令

       px2rem

        你也可以设置一个配置文件

            px2rem --config pxrem.config.js

    config

    默认 config:

        {
            patterns: "**/*.css",
            pxToRemRatio: 0.01,
            ignoreCss: [],
            isReplace: false,
            convertBorder1px: false
        }

        你也可以在当前文件夹下新建一个配置文件, 比如: pxrem.config.js

        module.exports = {
            patterns: "./WrcIosselect/lib/WrcIosselect.css",
            pxToRemRatio: 0.01,
            ignoreCss: ['font-size', 'line-height'],
            isReplace: false,
            convertBorder1px: true
        };

        然后你可以在命令行输入时作为参数带入:

    px2rem --config pxrem.config.js
    

    参数说明

       patterns: 访问 https://www.npmjs.com/package/glob 然后查看patterns参数        pxToRemRatio: px和rem的比值,默认0.01

    ignoreCss: 该数组内的css属性将不会被转换
    
    isReplace: 是否替换原来的文件,如果为true则替换,否则会在当前文件夹下生成一个原文件名 + '-px2rem' 的文件
    

           convertBorder1px: 是否转换1px宽度的border,默认不转换

    pxToRemRatio 说明

    如果你是使用adaptive.js,https://github.com/finance-sh/adaptive  或者使用1px设计图对应0.01rem的方法:

       1,如果是基于设计图开发,这个值就是0.01

           2,如果是将width=device-width下,以px为单位的老css文件转换为rem, 如果新的设计图为640,这个值一般为 (1 * 2) / 100, 如果新的设计图为750,这个值为 (7 / 3 * 1) / 100

    如果你使用的是手淘解决方案Flexible或类似原理的自适应方案

       1,如果是基于设计图,这个值是 1 / (设计图宽度 / 10)

    2,如果是将width=device-width下,以px为单位的老css文件转换为rem, 如果新的设计图为640,这个值一般为 1 / (640 / 10) * 2, 如果新的设计图为750,这个值为 1 / (750 / 10) * 2.3333
    

    怎么在webpack中使用

    package.json:

        "devDependencies": {
            "px-rem": "*"
        }
    配置webpack.config.js:
    
        module.exports = {
            node: {
                fs: "empty"
            },
            module: {
                loaders: [
                    {
                        test: /.css$/,
                        loader: 'style-loader!css-loader!px-rem'
                    }
                ]
            }
        }

    你必须新建一个文件叫:pxrem.webpack.conf.json 在你的项目根目录 (和package.json同一文件夹下):

        {
            "pxToRemRatio": 0.01,
            "ignoreCss": [],
            "convertBorder1px": true
        }

    当你在webpack项目的开发环境使用时,它会自动将对应文件中的px转换为rem为单位(原文件并没有转换,内存中的对应文件转换,可以访问对应页面查看效果)

    当你编译到生产环境时,对应的文件已经被转换    

  • 相关阅读:
    UISlider无法拖动进度条的问题解决
    记一次UICollectionView中visibleCells的坑
    UITableViewController的子控件不随着滑动
    Pthon的定时任务APScheduler的启动与关闭
    Flask采用Virtualenv+Supervisor+Nginx部署应用
    Python安装Mysql驱动出错解决(最新出炉)
    【iOS9系列】- CoreSportlight内容索引的使用
    雷猴 2016
    【iOS系列】-使用CAGradientLayer设置渐变色
    公钥,私钥,SSL(讲的很生动) (转) 对称加密、非对称加密初探
  • 原文地址:https://www.cnblogs.com/mufc-go/p/6211250.html
Copyright © 2011-2022 走看看