sprite图在移动端的使用
做移动端页面时,设计稿中的切片图片往往是实际的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图在移动端的使用的更多相关文章
- rem布局下使用背景图片和sprite图
现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景图片.本文就来聊聊 ...
- supermap iclient for js 标签专题图(服务端)
<!DOCTYPE><html> <head> <meta http-equiv="Content-Type" content=" ...
- 做小图标还用sprite图?你out了!史上最简单易懂iconfont使用教程
1.什么是iconfont? 说白了就是用图标制作而成的一套字体文件,本质是一个字体文件(扩展名是ttf\woff\svg的文件).它是用来制作网页常用小图标的一种方法.以下是天猫首页使用iconfo ...
- 2018(2017)美图java服务端笔试(回忆录)
选择题有几道,是比较基础的 填空题两道:一道是类似c语言的给出abc的值求 ++a+b+++c++ ,另一道是说出两个常见的垃圾回收算法 编程题 找出出现次数为1的数字然后改进(要求O(n)) 数据 ...
- 移动端适配之sprite雪碧图背景定位
移动端适配一般我会使用rem进行适配,大致操作就是按照一定尺寸设计稿进行制作,最后将所有px值转换为rem,但是一些手机背景精灵图(cssSprite)就会出现一些误差(1px左右),如果公司要求不高 ...
- 移动端适配之雪碧图(sprite)背景图片定位
为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...
- 美图App的移动端DNS优化实践:HTTPS请求耗时减小近半
本文引用了颜向群发表于高可用架构公众号上的文章<聊聊HTTPS环境DNS优化:美图App请求耗时节约近半案例>的部分内容,感谢原作者. 1.引言 移动互联网时代,APP 厂商之间的竞争非常 ...
- 在rem布局下使用背景图片以及sprite
现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...
- compass做雪碧图
由于最近没什么时间好好写博文,我把用sass做雪碧图的关键点贴出来方便自己记忆: config.rb注释 # Set this to the root of your project when dep ...
随机推荐
- 数据库中 关于不能用in 不能用exist 等关键字 查询不出现字段的问题
这是之前在网上见到的一道题,后来心里略微想了想 觉得应该可能,所以就一闪而过了,之前去面试晨光的时候面试者问了我这道问题,当时也只是把自己的想法说了一下,可能因为当时面试的感觉不太好,面试官也没有追究 ...
- python学习笔记系列----(一)python简介
一个月前,就按下决心要系统的学习下python了,虽然之前有学习过java,学习过c++,也能较为熟练的使用java做自动化测试看懂c++里的业务逻辑,但是实际上有那么多的东西自己还是不清楚,今天下定 ...
- [Zend]设置ZendStudio编辑器配色
首先,菜单栏–help–install new software… 接着,添加一个更新源,就是点击界面的add按钮,在新窗口的location位置输入http://eclipse-color-them ...
- MVC异常日志生产者消费者模式记录(异常过滤器)
生产者消费者模式 定义自己的异常过滤器并注册 namespace Eco.Web.App.Models { public class MyExceptionAttribute : HandleErro ...
- Python之基础知识
一.数据类型和变量 计算机顾名思义就是做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.网页等各种各样的数据,不同的数据,需要定 ...
- 查看oracle被锁的表
SELECT /*+ rule*/ a.sid, b.owner, object_name, object_type FROM v$lock a, all_objects b WHERE TYPE = ...
- ajax用法流程
这里是用javascript做的一个ajax的一个用法以及总结概括.供友友们进行参考. 1 window.onload=function() { var oBtn=document.getElemen ...
- <转>关闭 程序崩溃时 windows 正在检查该问题的解决方案
本文转自:http://www.cnblogs.com/dabaopku/archive/2011/07/04/2097029.html 尤其是使用visual studio开发程序 ,自己特意thr ...
- Cheatsheet: 2016 01.01 ~ 01.31
Mobile An Introduction to Cordova: Basics Web Angular 2 versus React: There Will Be Blood How to Bec ...
- 使用Rsync进行文件的同步与备份
Rsync是Linux下非常不错的文件同步备份工具,安全性高.备份迅速.支持增量备,功能强大且高效. 服务端配置 Rsync服务的配置文件/etc/rsyncd.conf,示例配置(带用户名密码配置) ...