码迷,mamicode.com
首页 > 移动开发 > 详细

移动端雪碧图sprite的实现

时间:2017-11-26 16:52:29      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:实现   round   图片   icon   size   就是   100%   大小   不同   

移动端适配的时候,通常是用rem作为长宽单位,因此,在不同的设备下,元素的实际宽高(px)是不一样的,如果是单张图片作为为背景图片的时候,最为方便,只要设置背景图片的属性background-size:contain|conver|100%;都能够将图片盖住整个div。

其次如果用雪碧图的话,那么得将 背景图片的大小和位置改为rem单位。background-position:x.x rem  y.y rem;background-size : xxrem yyrem;此处就是将按照设计稿的px来转换为rem。原理就是背景图片的大小,还有显示的背景图片位置都用rem来相对变化,就能够正确的显示对应的icon。

移动端雪碧图sprite的实现

标签:实现   round   图片   icon   size   就是   100%   大小   不同   

原文地址:http://www.cnblogs.com/alinjj/p/7899155.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!