手机端CSS Sprite图标定位的学习笔记
看了下携程的手机端的网站这些图标是用了雪碧图来合并的,因为一直以来手机端的屏幕大小不一,所以通常都会把设计图等比例缩放的形式展现,百分比的方式来布局,达到自适应。
下面我们就来说说这个携程手机端的案例吧:
首先是合并的雪碧图:
大家发现没有,雪碧图的尺寸与原图刚好缩放了2倍。
下面的图就是其中某个显示图标元素,包括宽度、高度和左边值刚好都是缩放过2倍的,所以看到这里都明白了吧,手机端的雪碧图就是这么做的,也挺简单的吧,比PC端就是多了一步缩放的计算,哈哈。
您可能感兴趣的文章:
手机端CSS Sprite图标定位的学习笔记
利用HTML5 Canvas实现打飞机游戏
如何将 HTML5 性能发挥到极致
笔记本电脑散热不好什么原因,笔记本散热差的解决办法
怎么用python实现画爱心
HTML5的学习之路
笔记本无法实现自动待机屏保(Win8)解决方法
Python:实现端口扫描
HTML5 canvas实现画图程序(附代码)
Photoshop结合SAI把手机照片转手绘效果实例教程