px转rem/vw方法小结

2018-04-03 | 1,569浏览 | 0评论 | 标签:pxToRem pxToVw

pxToRem.jpg

px转rem/vw方法小结

一、基于sass

方法是从网上摘抄,自己作了一些改进。现在可以配置转换的结果(rem或vw)、可以识别auto、0、rem、em、vw等不需要转的单位。less同理。

@function rem($values){
    $root: 16px;
    $unit: rem;
    $list:();
    @each $v in $values {
        $res:0;
        @if ($v == 0 or $v == auto or unit($v) == rem or unit($v) == em or unit($v) == vw or unit($v) == vh){
            $res: $v;
        }@else{
            $res: ($v + 0px) / $root + $unit;
        }
           $list: append($list, $res);
    }
    @return $list;
}

演示:

源文件 demo.scss :

div{margin:rem(10px 10rem 0 auto);}

编译后 demo.css :

div{margin: 0.625rem 10rem 0 auto;}

二、基于编辑器sublime Text插件cssrem

使用方法一目了然,cssrem文档

cssrem.jpg

cssrem2.jpg

作者的初衷应该只是提供px转rem,其实简单修改一下,可以实现各类单位的互转,比如px转vw。
第一步:修改配置 Sublime Text -> Preferences -> Package Settings -> cssrem -> settings-user:

{
"px_to_rem": 40,   //默认40,即1rem=40px
"max_rem_fraction_length": 2, //小数精度
"available_file_types": [".css", ".less", ".sass",".scss",".html"] //监听文件类型
}

在上面配置中,新增一个属性,我取名为unit,即:

{
"px_to_rem": 40,   //默认40,即1rem=40px
"max_rem_fraction_length": 2, //小数精度
"available_file_types": [".css", ".less", ".sass",".scss",".html"], //监听文件类型
"unit":"rem" //单位,默认转为rem
}

第二步:修改cssrem.py,在Sublime Text -> Preferences -> browse packgaes -> cssrem-master -> cssrem.py:
把rem单位改为取配置即可。点这里下载我修改后的cssrem.py 。

效果:
cssvw.jpg

三、其它方法

1 . px转rem在线工具
此类工具很多,我随便找了几个排名靠前的:

http://alurk.com/
http://www.ofmonkey.com/front/rem

2 . gulp等各类打包工具

这个方法比较激进,打包时直接匹配px,强行转为rem。下面的代码在网上找的,我没测试过,反正就这么个意思,仅供参考。

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'));
});

总结

个人还是更偏向于第一种方法,即保留了设计稿的px,方便日后查改,又统一了转换方法。
更多移动端h5适配的理论和实践,推荐这篇文章:https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

(本篇完。欢迎留言探讨, 或打赏支持。)

添加评论 (已启用人工审核)

打赏
编辑代码 运行结果
退出