html5 - 怎么快速将css中的px替换成rem

Question

我做了一个网页
一直是用的px做为单位
但是发现在手机中效果不好 单位不精确 和 太固定
我想要的是一种响应式大小的单位
然后就想到了rem，
但是我现在一个个的去修改px感觉好麻烦
有没有办法可以想查找替换一样的自动替换px为rem单位呢
主要是我这里给body定义了font-size: 62.5%

所以我的所有px单位换rem都要除以10，有没有一种正则或者别的办法来实现替换px单位就获取px前面的数值并除以10：
像这样：

figure {
    margin: 1em 40px;
}

查找px
定位到margin: 1em 40px;替换px为rem

figure {
    margin: 1em 40px;
}

同时自动取值px前面的数值40除以10

figure {
    margin: 1em 4rem;
}

求大神帮帮我
我的hbuilder可以使用正则：

Answer 1

Look at this: https://github.com/imochen/ho...
This solution can help you, perfectly adapt to a mobile terminal, hotcss.js dynamically calculates the device's visible width, sccs The file is used to convert px to rem value. It is currently used in our project. If you don’t understand, you can reply and ask me!

Answer 2

Write a task using gulp-replace.

var replace = require('gulp-replace');

gulp.task('pxToRem', function(){
  return gulp.src('*.html')
    .pipe(replace(/(\d+)px/g, function(match, p1){
        return Number(p1) / 10 + 'rem';
    }))
    .pipe(gulp.dest('dir'));
});

I haven’t tested it yet, please correct it if it’s wrong.

Answer 3

I have never done this kind of thing before, so let me give you an idea.
I plan to complete the replacement in batches:

1. Decimals greater than or equal to 10: (d+)(d).(d+)px replaced with $1.$2$3rem;

2. Decimals greater than or equal to 1 and less than 10: (d).(d+)px is replaced with .$1$2rem;

3. Decimal less than 1 (actually it should not exist): 0*.(d+)px is replaced with .0$1rem;

4. An integer greater than or equal to 10: (d+)(d)px is replaced with $1.$2rem;

5. An integer less than 10: (d)px is replaced with .$1.

Simplified into three cloths:
Merge 1, 2: (d*)(d).(d+)px is replaced with $1.$2$3rem;
3 remains unchanged;
Merge 4, 5 : (d*)(d)px is replaced with $1.$2rem.

I haven’t thought about it carefully and I haven’t tested it, so I don’t know if it’s right or not.

Answer 4

You can directly convert PX to rem here, http://520ued.com/tools/rem, I hope it will be helpful to you.

Answer 5

I have been using this tool to directly convert px to rem. I recommend it to everyone, http://www.ofmonkey.com/front...