美文网首页前端学习前端开发前端日报
css之px自动转rem—“懒人”必备

css之px自动转rem—“懒人”必备

作者: webCoder | 来源:发表于2016-01-14 11:39 被阅读38644次

    作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了。
    但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时、费力的过程,有没有什么办法可以“解放”我们呢?(原谅我的懒~)

    1.CSS处理器

    Sass、LESS以及PostCSS这样的处理器都可以处理。

    Sass(使用Sass的函数、混合宏这些功能来实现):
    @function px2em($px, $base-font-size: 16px) {
      @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return px2em($px + 0px); // That may fail.
      } @else if (unit($px) == em) {
        @return $px;
      }
      @return ($px / $base-font-size) * 1em;
    }
    
    Sass(使用Sass的混合宏):
    @mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){
      //Conver the baseline into rems
      $baseline-rem: $baseline-px / 1rem * 1;
      //Print the first line in pixel values
      @if $support-for-ie {
        #{$property}: $px-values;
      }
      //if there is only one (numeric) value, return the property/value line for it.
      @if type-of($px-values) == "number"{
        #{$property}: $px-values / $baseline-rem;
      }
      @else {
        //Create an empty list that we can dump values into
        $rem-values:();
        @each $value in $px-values{
          // If the value is zero or not a number, return it
          @if $value == 0 or type-of($value) != "number"{
            $rem-values: append($rem-values, $value / $baseline-rem);
          }
        }
        // Return the property and its list of converted values
        #{$property}: $rem-values;
      }
    }
    

    上面的方法,我们还得去额外学习sass这类的书写规则,也需要配置,虽然很简单,但是能不能更简单就更简单呢?

    2.CSSREM

    这是插件是flashlizi为sublime text编写的一个插件,用起来真的很方便!我们可以在GitHub上看到。

    下面我介绍一下,如何配置:

    2.1 我们可以在GitHub上下载所依赖的文件;
    2.2 打开Sublime Text,进入packages目录(Sublime Text -> Preferences -> Browse Packages);
    2.3 将cssrem-master文件夹放在上一步打开的目录中,重启sublime text即可生效;
    我们也可以修改默认配置:
    打开cssrem-master文件夹下的cssrem.sublime-settings文件,进行修改
    {
        "px_to_rem": 40, //px转rem的单位比例,默认为40
        "max_rem_fraction_length": 6, //px转rem的小数部分的最大长度。默认为6。
        "available_file_types": [".css", ".less", ".sass",".html"]
        //启用此插件的文件类型。默认为:[".css", ".less", ".sass"]
    }
    

    实际测试:
    新建一个.css文件:


    11.png

    按tab键,得到如下结果:

    22.png

    是不是很方便,快动手去尝试吧~

    最后,附上 微网站—使用flexible.js实现移动端设备适配

    相关文章

      网友评论

      • 苏水儿:cssrem 插件,在我更新了sublime的时候,原来是按 tab就可以 px 转换成rem的 现在只能按enter键, 很不习惯,如何改回来
      • afca61fa9b60:新人求实教 找不到Sublime Text -> Preferences -> Browse Packages 文件夹
      • 6932c107f6e4:有没有vs的或者webstorm的?
      • 789c8ce8635c:推荐大家用这个工具在线px转rem,很方便,http://www.ofmonkey.com/front/rem
      • 789c8ce8635c:可以用这个在线工具直接转换,很方便,http://www.ofmonkey.com/tools/front#rem
      • 142b81c8d9b2:按你的操作还是不行呢?能加个qq吗?1181397077
      • 路上行人__:好东西,已收藏!
      • 京东内部优惠券:可以去这下载cssrem插件- https://github.com/yanglei0323/cssrem.git
        df4ee7d7cdc4:本地设置好之后,,请问,如何发布远程
        :blush: :smile:
      • eca0973b93b6:这个支持mac 版的sublime text3 么?
        mac版的按照步骤弄没效果
      • 2a9a49fed7ff:cssrem-master我这个已经放进去,新建css文件的时候,没用,求指导
        丁小时候:@2a9a49fed7ff 配置 ".html" 没,还有 要先保存文件,这个 插件才会生效
      • 王尖儿:我就想知道 “cssrem-master文件夹” 是怎么得到的?菜鸟一枚 求指导。
        webCoder:@王尖儿 从https://github.com/flashlizi/cssrem这个链接下载项目
      • 22b9cb37baa9:不能用是怎么回事?
        51f6bda9a5c1:@职业学姐 我的也不能用 你的现在好了吗,是为什么呢
        云桃桃:@webCoder 是啊,但是不能用啊,
        webCoder:@22b9cb37baa9 您是sublime text3么

      • ae2509c98e04:为什么把默认值40改了,转换的时候还是按40转换的呢
        webCoder:@ae2509c98e04 你是不是哪里设置错了 或者重启编辑器试试
      • 丑_丑: :joy: 我也是sublime2不可以
      • 觉子先生:比例我都是用100的。。。转化很轻松(☆_☆),不过这个Sublimetext 插件很赞
      • BigBigBing:"px转rem的单位比例,默认为40",这个为什么要将它设置成40?如果设计稿的大小是750px,缩放比例是不是应该为46.875?(750px/16px)
        webCoder:@BigBigBing 为什么插件将这个值默认设置成40我不太清楚,如果你的设计稿是多宽,插件中就设置为设计稿宽度/10
      • yepengmk:非常棒
        51f6bda9a5c1:我的不可以啊
      • Koala_0:非常好用 :smiley:
      • 伊夕浅语:一定要sublime开发工具吗?Hbuilder不行吗?
        iplaycodex:HB中可以用LESS写,有插件
        webCoder:@伊夕浅语 没有尝试过在hbuilder中配置,你可以网上找找相关类似的插件
      • 69fdb2364c96:CSSREM插件上在sublime text2上可以用吗
        ml火guo:@MichaelShen sublime试下 ctrl+e快捷键;可能更改了快捷方式吧,可以在emmit的key-bindding-user修改为tab
        MichaelShen:@挥飞的猪 亲测sublime text 2上不行,装了连原来的emmet都会失效。
        webCoder:@挥飞的猪 没试过呢
      • c1287eee6a95:为什么我的用不了?
        51f6bda9a5c1:@webCoder sublime 需要什么配置
        webCoder:@阳光森林sunshine 你sublime配置好了没
      • 周萌萌:哦哦,简书的设计确实比较好,简洁 美观,我也是今天才发现有这么个博客存在
      • 周萌萌:也许 他们 还不知道,简书 里 还有前端开发的 技术分享。
        webCoder:@周萌萌 我是觉得简书的书写很方便,格式很好控制,就把这当做博客了
      • 周萌萌:太帅了,这个插件 太棒了,计算rem太方便了
        webCoder:@周萌萌 谢谢~第一个评论

      本文标题:css之px自动转rem—“懒人”必备

      本文链接:https://www.haomeiwen.com/subject/pczckttx.html