做移动端页面时,设计稿中的切片图片往往是实际的2倍,此处记录图片正常显示大小的技巧。

当图片是单张的话,可以对容器设计实际大小,然后设置background-image,为了让图片缩小一倍,可以设置background-size:contain;

如:图片尺寸是20*20,但是在移动端页面显示的则是10*10,此时,对容器进行设置:

#contain{width:10px;height:10px;background:url(images/xx.png) no-repeat 0 0;background-size:contain;} 

当图片不是单张的而是一张sprite图,那么首先需要对容易设置于图片一样的大小,然后使用transform:scale(0.5)进行缩放一倍。

#contain{width:20px;height:20px;background:url(images/sprite.png) no-repeat -200px 0;transform:scale(0.5);-webkit-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);} 

sprite图在移动端的使用的更多相关文章

  1. rem布局下使用背景图片和sprite图

    现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景图片.本文就来聊聊 ...

  2. supermap iclient for js 标签专题图(服务端)

    <!DOCTYPE><html> <head> <meta http-equiv="Content-Type" content=" ...

  3. 做小图标还用sprite图?你out了!史上最简单易懂iconfont使用教程

    1.什么是iconfont? 说白了就是用图标制作而成的一套字体文件,本质是一个字体文件(扩展名是ttf\woff\svg的文件).它是用来制作网页常用小图标的一种方法.以下是天猫首页使用iconfo ...

  4. 2018(2017)美图java服务端笔试(回忆录)

    选择题有几道,是比较基础的 填空题两道:一道是类似c语言的给出abc的值求 ++a+b+++c++  ,另一道是说出两个常见的垃圾回收算法 编程题 找出出现次数为1的数字然后改进(要求O(n)) 数据 ...

  5. 移动端适配之sprite雪碧图背景定位

    移动端适配一般我会使用rem进行适配,大致操作就是按照一定尺寸设计稿进行制作,最后将所有px值转换为rem,但是一些手机背景精灵图(cssSprite)就会出现一些误差(1px左右),如果公司要求不高 ...

  6. 移动端适配之雪碧图(sprite)背景图片定位

    为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...

  7. 美图App的移动端DNS优化实践:HTTPS请求耗时减小近半

    本文引用了颜向群发表于高可用架构公众号上的文章<聊聊HTTPS环境DNS优化:美图App请求耗时节约近半案例>的部分内容,感谢原作者. 1.引言 移动互联网时代,APP 厂商之间的竞争非常 ...

  8. 在rem布局下使用背景图片以及sprite

    现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...

  9. compass做雪碧图

    由于最近没什么时间好好写博文,我把用sass做雪碧图的关键点贴出来方便自己记忆: config.rb注释 # Set this to the root of your project when dep ...

随机推荐

  1. 数据库中 关于不能用in 不能用exist 等关键字 查询不出现字段的问题

    这是之前在网上见到的一道题,后来心里略微想了想 觉得应该可能,所以就一闪而过了,之前去面试晨光的时候面试者问了我这道问题,当时也只是把自己的想法说了一下,可能因为当时面试的感觉不太好,面试官也没有追究 ...

  2. python学习笔记系列----(一)python简介

    一个月前,就按下决心要系统的学习下python了,虽然之前有学习过java,学习过c++,也能较为熟练的使用java做自动化测试看懂c++里的业务逻辑,但是实际上有那么多的东西自己还是不清楚,今天下定 ...

  3. [Zend]设置ZendStudio编辑器配色

    首先,菜单栏–help–install new software… 接着,添加一个更新源,就是点击界面的add按钮,在新窗口的location位置输入http://eclipse-color-them ...

  4. MVC异常日志生产者消费者模式记录(异常过滤器)

    生产者消费者模式 定义自己的异常过滤器并注册 namespace Eco.Web.App.Models { public class MyExceptionAttribute : HandleErro ...

  5. Python之基础知识

    一.数据类型和变量 计算机顾名思义就是做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.网页等各种各样的数据,不同的数据,需要定 ...

  6. 查看oracle被锁的表

    SELECT /*+ rule*/ a.sid, b.owner, object_name, object_type FROM v$lock a, all_objects b WHERE TYPE = ...

  7. ajax用法流程

    这里是用javascript做的一个ajax的一个用法以及总结概括.供友友们进行参考. 1 window.onload=function() { var oBtn=document.getElemen ...

  8. <转>关闭 程序崩溃时 windows 正在检查该问题的解决方案

    本文转自:http://www.cnblogs.com/dabaopku/archive/2011/07/04/2097029.html 尤其是使用visual studio开发程序 ,自己特意thr ...

  9. Cheatsheet: 2016 01.01 ~ 01.31

    Mobile An Introduction to Cordova: Basics Web Angular 2 versus React: There Will Be Blood How to Bec ...

  10. 使用Rsync进行文件的同步与备份

    Rsync是Linux下非常不错的文件同步备份工具,安全性高.备份迅速.支持增量备,功能强大且高效. 服务端配置 Rsync服务的配置文件/etc/rsyncd.conf,示例配置(带用户名密码配置) ...