先分享一下地址:http://alloyteam.github.io/gopng/

使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖进去后自己调)

然后点击右边绿色的make按钮即可

点击后,上面的选项会高亮,提示你制作好了,

点击PNG选项即可下载制作好的雪碧图, 点击css选项即可查看每个小图标在雪碧图中对应的x和Y位置

对于PC端来说,基本就完成了。

对于移动端采用rem布局的,则需要多一些步骤:

首先将对应的x和y位置转化为rem:以640设计稿为例,html的fontsize为64px(本例假设采用了淘宝的flex.js)

假设某个小图标对应雪碧图的x y位置为-200px , -100px

则对应的x位置为-200/64(rem)  Y坐标为-100/64(rem);

此外,还需要background-size配合,假设制作好的雪碧图为400*300,

则设置:background-size: 400/64(rem)  300/64(rem) 或者:background-size: 400/64(rem)  auto   或者直接  background-size: 400/64(rem);

如此一来,即使使用了rem布局在移动端也可以大胆的使用雪碧图了,但是在rem转化的时候计算非常麻烦,因此可以再sass文件里添加2个方法:

//将px转化为rem(根据html的fz进行转化)

@function torem($px) {
       @return $px / 64px * 1rem;
}

//定制mixin代码块:需要4个参数:图片地址,x轴位置,Y轴位置,雪碧图宽度

@mixin spImg($url, $left, $top, $imgWidth ) {
        background: url($url) no-repeat $left $top;
        background-size:$imgWidth;
}

使用的时候如下:

移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具的更多相关文章

  1. 第130天:移动端-rem布局

    一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...

  2. 移动端REM布局模板(阿里高清方案)

    移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...

  3. 移动端Rem布局注意事项

    1.布局的总体结构框架:      2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...

  4. 第132天:移动web端-rem布局(进阶)

    rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...

  5. 一看就懂得移动端rem布局、rem如何换算

    这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有 ...

  6. 移动端rem布局和百分比栅格化布局

    移动端的rem: 使用方法: 设置html的font-size,根据浏览器分辨率缩放 设置根元素font-size为100px这样好用的值,不要设为10px这样的: 然后获取浏览器的分辨率,也就是视口 ...

  7. 十八、移动端rem布局

    使用rem布局,首先要知道自己是根据UI给的视效图的多少基准的,这里是以750px为基准,代码如下: //rem布局,此处根据750px来设置,放大100倍 (function(doc, win) { ...

  8. 关于移动端 rem 布局的一些总结

    [资源一]基础知识恕不回顾 基础知识参考以下两篇博客: http://isux.tencent.com/web-app-rem.html http://www.w3cplus.com/css3/def ...

  9. 关于移动端rem 布局的一些总结

    1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位 2.为什么web app要使用rem? 实现强大的屏幕适配布局(淘宝,腾讯,网 ...

随机推荐

  1. HDU3579:Hello Kiki(解一元线性同余方程组)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=3579 题目解析:求一元线性同余方程组的最小解X,需要注意的是如果X等于0,需要加上方程组通解的整数区间lc ...

  2. Deep Learning(4)

    四.拓展学习推荐 Deep Learning 经典阅读材料: The monograph or review paper Learning Deep Architectures for AI (Fou ...

  3. 数据挖掘-逻辑Logistic回归

    逻辑回归的基本过程:a建立回归或者分类模型--->b 建立代价函数 ---> c 优化方法迭代求出最优的模型参数  --->d 验证求解模型的好坏. 1.逻辑回归模型: 逻辑回归(L ...

  4. Python常用模块(logging&re&时间&random&os&sys&shutil&序列化&configparser&&hashlib)

    一. logging(日志模块) 二 .re模块 三. 时间模块 四. random模块 五. os模块 六. sys模块 七. shutil模块 八. 序列化模块(json&pickle&a ...

  5. Mbps MB/S Mb/s

    以前都没有注意这几个的区别,今天百度科普了一下 所谓 10M 带宽,其实是指 10Mbps (兆比特) 1.平时所说的10m带宽,其实是指 10Mbps (兆比特)bit是计算机的最小位单位,1byt ...

  6. 牛客国庆集训派对Day6 Solution

    A    Birthday 思路:设置一个源点,一个汇点,每次对$源点对a_i, b_i , a_i 对 b_i 连一条流为1,费用为0的边$ 每个点都再连一条 1, 3, 5, 7, ....的边到 ...

  7. EF Code First学习笔记:数据库创建(转)

    控制数据库的位置 默认情况下,数据库是创建在localhost\SQLEXPRESS服务器上,并且默认的数据库名为命名空间+context类名,例如我们前面的BreakAway.BreakAwayCo ...

  8. Python 无穷大与NaN

    想创建或测试正无穷.负无穷或NaN(非数字) 的浮点数 Python 并没有特殊的语法来表示这些特殊的浮点值,但是可以使用float() 来创建它们.比如: >>> a = floa ...

  9. Hmtl5 <input>中placeholder属性(新属性)

    Hmtl5 <input>中placeholder属性(新属性) 一.定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示 ...

  10. BZOJ2209: [Jsoi2011]括号序列

    传送门 splay练习. 考虑把括号序列转化成类似于区间最大/最小值的情况. 显然我们可以知道括号序列消完的情况肯定是$a$个)和$b$个(,那么把这些括号全部合法化的代价显然就是$\frac{a+1 ...