zoukankan      html  css  js  c++  java
  • gulp.spritesmith修改px为rem单位

    移动端开发中,使用gulp.spritesmith进行小图sprite并生成样式,但由于spritesmith默认是以px为单位,所以就把插件的内容修改了下让生成rem单位并且能把background-size设置为雪碧图的宽高。

    1.首先修改gulp.spritesmith ode_modulesspritesheet-templateslibspritesheet-templates.js

    ['x', 'y', 'offset_x', 'offset_y', 'height', 'width', 'total_height', 'total_width'].forEach(function (key) {
        if (item[key] !== undefined) {
          px[key] = item[key]/64 + 'rem';
        }
      });

    修改的地方是item[key]/64+'rem';这句,我的是设置了640px宽度,所以这里除以64来转换得到rem值。

    2.修改gulp.spritesmith ode_modulesspritesheet-templateslib emplatescss.template.handlebars

    在模板页中加入生成background-size内容

    {{/block}}
    {{#block "sprites"}}
    .cicon {
        display: inline-block;
        background-size: {{spritesheet.px.width}} {{spritesheet.px.height}};
    }
    {{#each sprites}}
    {{{selector}}} {
      background-image: url({{{escaped_image}}});
      background-position: {{px.offset_x}} {{px.offset_y}};
       {{px.width}};
      height: {{px.height}};
    }
    {{/each}}
    {{/block}}

    主要添加了加粗的代码行。以上两点修改完成就可以把spritesmith生成的px转换成rem,增加background-size主要是因为px单位下图片背景位置跟大小默认就是雪碧图中的大小,所以转换成rem后需要进行修改。

    PS:rem单位下在不同设备中可能出现图片中出现了雪碧图中其他图的边边角角,所以这里需要设置图片合成的时候彼此之间有一定的间隙,这个只要是gulpfile中设置下padding:10即可。

    var spriteData = gulp.src(base_url+'_images/icons/*.+(jpeg|jpg|png)').pipe(spritesmith({
        imgName: 'icons_sprite.png',
        cssName: 'icons_sprite.css',
        cssFormat: 'css',
        padding: 10
      }));
  • 相关阅读:
    PHP保留小数的相关方法
    ASP.NET Core MVC 之过滤器(Filter)
    ASP.NET Core MVC 之控制器(Controller)
    ASP.NET Core MVC 之视图组件(View Component)
    ASP.NET Core MVC 之局部视图(Partial Views)
    标签助手(TagHelper)
    ASP.NET Core MVC 之布局(Layout)
    ASP.NET Core MVC 之视图(Views)
    ASP.NET Core MVC 之模型(Model)
    九卷读书:淘宝从小到大的发展 -重读《淘宝技术这十年》
  • 原文地址:https://www.cnblogs.com/zhouzone/p/5275197.html
Copyright © 2011-2022 走看看