gulp.spritesmith修改px为rem单位
移动端开发中,使用gulp.spritesmith进行小图sprite并生成样式,但由于spritesmith默认是以px为单位,所以就把插件的内容修改了下让生成rem单位并且能把background-size设置为雪碧图的宽高。
1.首先修改gulp.spritesmith\node_modules\spritesheet-templates\lib\spritesheet-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\node_modules\spritesheet-templates\lib\templates\css.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}};
width: {{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
}));
gulp.spritesmith修改px为rem单位的更多相关文章
- px,em,rem字体单位
1.px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 2.em是相对长度单位.相对于当前对象内文本的字体尺寸,em存在值继承问题. 浏览器的默认字 ...
- px与rem关系及转换
PX特点 1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能够调整px和em,rem,但是96%以上的中 ...
- rem单位在手机网站中的使用
em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),也就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字 ...
- px,em,rem的区别
PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- css中px,em,rem,rpx的区别
今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...
- 彻底弄懂px em rem
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- px em rem区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- px em rem 区别
PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...
- 移动端适配(rem单位定义方法)
注:移动端必须写: <meta name="viewport" content="width=device-width, user-scalable=no, ini ...
随机推荐
- Calculations are rather interesting
Calculations are rather interesting, especially when some thoughts are involved therein.
- 聚合查询中的Group by
2005版本以上的sql server 查询中如果既包含聚合函数列(诸如sum ,count,avg,max等)又存在一般列的情况,则查询字符串结尾必须包含Group By [某一般列]. 其实微软 ...
- 性能测试工具之Gatling
转载:http://ningandjiao.iteye.com/blog/2004579 Gatling一直是久闻其名但是未得机会运用,正好最近有需求做性能测试,于是趁此机会熟悉了一下,可以说,这是目 ...
- java io操作常规
1.四种类型: 字节流: InputStream OutputStream 字符流: Reader Writer 2.转换流 InputStreamReader, OutPutStreamWriter ...
- [Flex] as3xls读取excel,修改保存单表(二)
这个方法仅用了as3xls读取excel的功能,修改保存独立出来了. <?xml version="1.0" encoding="utf-8"?> ...
- type和role属性有什么区别呢
type是规定标签的类型,比如<input />标签中使用type="button"就是代表一个按钮 使用type="text" 就是一个文本框,t ...
- IntelliJ IDEA调整控制台输出字体大小
File->Settings->Editor->Colors & Fonts->Console Font Size: 16
- JDK6的switch支持不是很好
在switch中只支持int或者枚举型值: 不支持其他类型,如String,会报错 Cannot switch on a value of type String for source level b ...
- 如何在CODESOFT中自定义删除文档备料
CODESOFT 2015是先进的标签设计与集成软件.在使用CODESOFT制作条码标签时,为方便省时,我们可以事先创建自己的文档模板,保存它们以供将来使用.接下来,小编就讲讲CODESOFT 201 ...
- PL/0与Pascal-S编译器程序详细注释
学校编译课的作业之一,要求阅读两个较为简单的编译器的代码并做注释, 个人感觉是一次挺有意义的锻炼, 将自己的心得分享出来与一同在进步的同学们分享. 今后有时间再做进一步的更新和总结,其中可能有不少错误 ...