RETINA显示屏下ICON优化方法
便于理解,先来了解几个名词:
- dpi(dots per inch),每英寸的点数,用来测量任何设备的硬件分辨率。一个21”的屏幕可以拥有1680 X 1050 的分辨率,27”的屏幕也可以拥有相同的分辨率,那么大屏幕比小屏幕的dpi小。
- dip(device independent pixels),设备独立像素,与160 dpi显示屏上的1px相等, 又称dp。
- dppx(dots per ‘px’),每px单位上的点数。由于CSS英寸与CSS像素的固定比是1:96,那么1dppx=96dpi。
- Device pixel ratio (DPR)是物理像素与CSS像素的比率。
方法一:media queries & background-size
/*
** 注意:background-size的值是sprite.png的尺寸,而不是每个icon的尺寸
*/
.sprite-icon{
background-image:url(sprite.png);
background-size:98px 65px;
}
/*
** 每个icon的background-positon只需写一次,即icon相对与1x图片的位置,在@2x图片中的位置也是这个
*/
.icon-1{
background-position:0 0;
}
.icon-2{
background-position:-33px 0;
}
.icon-3{
background-position:-66px 0;
}
.icon-4{
background-position:0 -33px;
}
.icon-5{
background-position:-33px -33px;
}
.icon-6{
background-position:-66px -33px;
}
/*
** 2x图片要是1x图片的准确2倍
** sprite中图标之间的间隙,也应是2倍
** 每个图标无需重新写background-position
*/
@media (min-resolution:2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio:2) /* Safari & Android Browser */
{
.sprite-icon{
background-image:url(sprite@2x.png);
}
}
方法二:background-image:img-set( url(a.png) 1x, url(a@2x.png) 2x )
媒体查询(media queries)已经可以解决高密度显示问题,为什么还需要image-set? 问的好。 使用image-set的两个主要好处:
- 与媒体查询不同的是,image-set没有告诉浏览器使用哪个图片,而是提供了一些选项。我希望将来在低网速下使用高密度设备,能够告诉浏览器使用低分辨率图片。如果浏览器能够根据当前的网络状况智能地选择使用的图片,那就更好了。 媒体查询的问题是没有给浏览器任何自由裁决权,它明确的指明,如果像素密度大于1或者2,浏览器就使用特定的图片。 我知道,这只是理论上(更是“意淫“出来)的好处。如今支持“image-set”的浏览器只是简单将图片源与显示密度相匹配,并没有提供额外的功能。但我坚信,同一张图片需要不同分辨率时,让浏览器去选择合适的图片是方向。
- CSS编码好处:将不同分辨率的图片源集中在一起。
/* ** 注意: ** 图片要求:2x图片要是1x图片的准确2倍,sprite中图标之间的间隙也应是2倍 ** 无需写background-size,浏览器自动处理 ** */ .sprite-icon{ background-image:url(sprite.png); background-image: -webkit-image-set( url('sprite.png') 1x, url('sprite@2x.png') 2x ); }
/* ** 每个icon的background-positon只需写一次,即icon相对与1x图片的位置,在@2x图片中的位置也是这个 */ .icon-1{ background-position:0 0; } .icon-2{ background-position:-33px 0; } .icon-3{ background-position:-66px 0; } .icon-4{ background-position:0 -33px; } .icon-5{ background-position:-33px -33px; } .icon-6{ background-position:-66px -33px; }
方法三: media queries & background-size,适用于仅部分图标提供了2x图,且icon位置不对应,可能是由工具生成的sprite。
.sprite-icon{
background-image:url(more.png);
}
.icon-1{
background-position:0 0;
}
.icon-2{
background-position:-33px 0;
}
.icon-3{
background-position:-66px 0;
}
.icon-4{
background-position:0 -33px;
}
.icon-5{
background-position:-33px -33px;
}
.icon-6{
background-position:-66px -33px;
}
.icon-7{
background-position:0 -66px;
}
/*
** 每个icon的backgroud-size是2x图片的一半
** 每个icon的backgroud-position是相对与2x图片的位置除以2
*/
@media (min-resolution:2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio:2) /* Safari & Android Browser */
{
.icon-1{
background-image:url(portion@2x.png);
background-size:197px 65px;
background-position:0 0;
}
.icon-2{
background-image:url(portion@2x.png);
background-size:197px 65px;
background-position:-33px 0;
}
.icon-3{
background-image:url(portion@2x.png);
background-size:197px 65px;
background-position:-66px 0;
}
.icon-4{
background-image:url(portion@2x.png);
background-size:197px 65px;
background-position:-99px -33px;
}
.icon-5{
background-image:url(portion@2x.png);
background-size:197px 65px;
background-position:-132px -33px;
}
.icon-6{
background-image:url(portion@2x.png);
background-size:197px 65px;
background-position:-165px -33px;
}
}
RETINA显示屏下ICON优化方法的更多相关文章
- ArcGIS API For Javascript:热力图不同级别下的优化方法
我们在地图缩放的不同级别下,热力图的显示效果会不同,由于点密度与模糊参数默认是固定的,因此需要对参数进行动态修改,以满足不同缩放级别下可以得到较好的显示效果. 思路是监听地图缩放级别,将地图缩放级别作 ...
- Retina显示屏-揭秘移动端的视觉稿通常会设计为传统PC的2倍
一.Retina显示屏简介 retina:一种具备超高像素密度的液晶屏,同样大小的屏幕上显示的像素点由1个变为多个,如在同样带下的屏幕上,苹果设备的retina显示屏中,像素点1个变为4个. reti ...
- Linux 下网络性能优化方法简析
概述 对于网络的行为,可以简单划分为 3 条路径:1) 发送路径,2) 转发路径,3) 接收路径,而网络性能的优化则可基于这 3 条路径来考虑.由于数据包的转发一般是具备路由功能的设备所关注,在本文中 ...
- 让你的应用支持新iPad的Retina显示屏
一.应用图片标准iOS控件里的图片资源,苹果已经做了相应的升级,我们需要操心的是应用自己的图片资源.就像当初为了支持iPhone 4而制作的@2x高分辨率版本(译者:以下简称高分)图片一样,我们要为i ...
- 提升网速的路由器优化方法(UPnP、QoS、MTU、交换机模式、无线中继)
在上一篇<为什么房间的 Wi-Fi 信号这么差>中,猫哥从微波炉.相对论.人存原理出发,介绍了影响 Wi-Fi 信号强弱的几大因素,接下来猫哥再给大家介绍几种不用升级带宽套餐也能提升网速的 ...
- php-fpm优化方法详解
php-fpm优化方法 php-fpm存在两种方式,一种是直接开启指定数量的php-fpm进程,不再增加或者减少:另一种则是开始时开启一定数量的php-fpm进程,当请求量变大时,动态的增加php-f ...
- 30多条mysql数据库优化方法,千万级数据库记录查询轻松解决(转载)
1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...
- Android中ListView的几种常见的优化方法
Android中的ListView应该算是布局中几种最常用的组件之一了,使用也十分方便,下面将介绍ListView几种比较常见的优化方法: 首先我们给出一个没有任何优化的Listview的Adapte ...
- CCS3.3下执行优化
最近想研究一下CCS下的程序优化,之前也了解一些,现在查阅一下资料,整理一下. 当然优化有很多种,我本次先说的是执行优化方式. 首先打开我们自己的工程.工程文件若显示为黄色的,则表示此文件默认优化选项 ...
随机推荐
- 从零开始写一个武侠冒险游戏-7-用GPU提升性能(2)
从零开始写一个武侠冒险游戏-7-用GPU提升性能(2) ----把地图处理放在GPU上 作者:FreeBlues 修订记录 2016.06.21 初稿完成. 2016.08.06 增加对 XCode ...
- Linux Apache和Nginx网络模型详解
进程阻塞和挂起的定义: 阻塞是由于进程所需资源得不到满足,并会最终导致进程被挂起 进程挂起的原因并不一定是由于阻塞,也有可能是时间片得不到满足,挂起状态是进程从内存调度到外存中的一种状态,若在 ...
- 2模02day1题解
源文件在我的网盘上.链接:http://pan.baidu.com/s/1qWPUDRm 密码:k52e (只有机智的人才能看到我的链接) 机智的双重下划线~~~ T1 T1就是一个递推,这题目把我恶 ...
- ORM框架是什么
ORM框架是什么 对象关系映射,目前数据库是关系型数据库 ORM 主要是把数据库中的关系数据映射称为程序中的对象 目前集中常见的ORM框架1 Nhibernate原因:用的比较多,资料也比较好找. ...
- Group Shifted Strings
Given a string, we can "shift" each of its letter to its successive letter, for example: & ...
- Hadoop入门程序WordCount的执行过程
首先编写WordCount.java源文件,分别通过map和reduce方法统计文本中每个单词出现的次数,然后按照字母的顺序排列输出, Map过程首先是多个map并行提取多个句子里面的单词然后分别列出 ...
- 手动构建Servlet项目的流程
前面讨论过手动建立jsp的项目,jsp是tomcat服务器负责编译执行,所以配置相对简单,而Servlet需要先把java源文件编译成字节码class文件,然后再执行,所以需要servlet-api. ...
- Codeforces 389B(十字模拟)
Fox and Cross Time Limit: 1000MS Memory Limit: 262144KB 64bit IO Format: %I64d & %I64u Submi ...
- dbvisualizer中文乱码
.dbvisualizer中文乱码 tools--tool properties找到Fonts--修改SQL Editor/Text Editor 将字体换成:微软雅黑.新宋体.楷体.黑体 .dbvi ...
- ecshop绕过验证码暴力破解
若验证码不匹配,并没有销毁当前验证码 所以就可以一次请求验证码图片后,只要不再刷新验证码就可以一直使用 1.获取正确的验证码 2. 1 2 3 4 5 6 7 8 9 10 11 12 13 ...