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下的程序优化,之前也了解一些,现在查阅一下资料,整理一下. 当然优化有很多种,我本次先说的是执行优化方式. 首先打开我们自己的工程.工程文件若显示为黄色的,则表示此文件默认优化选项 ...
随机推荐
- HDU 1506 Largest Rectangle in a Histogram (dp左右处理边界的矩形问题)
E - Largest Rectangle in a Histogram Time Limit:1000MS Memory Limit:32768KB 64bit IO Format: ...
- 二模 06day2
很长时间没更新有意义的题目了呢,这是一套题撒,于是乎我便开心的边刷题边发题解了撒. 第一题: interval 比较好玩的一题撒, 分分钟过了, 就是模拟贪吃蛇但是没有食物(嗯,只要你判断冲突). 整 ...
- 【OpenStack】OpenStack系列9之Compute节点安装
安装 安装参考: https://github.com/yongluo2013/osf-openstack-training/blob/master/installation/openstack-ic ...
- 《ASP.NET MVC4 WEB编程》学习笔记------Web API
本文截取自情缘 1. Web API简单说明 近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集 ...
- cocos2dx之lua派生类和方法重新
记得把extern.lua拷贝到你的资源目录,这里要用到 require "extern" MyLayer = class("MyLayer", functio ...
- After Effects的4种抠像插件比较分析
前景 背景 1.keylight(1.2) 2.Primatee Keyer Pro4.0 3.Zbig [边界生硬] 4.Power Matte v2 [速度很慢,边界生硬]
- Eclipse调试:F5、F6、F7、F8
F5:跳入方法 F6:向下逐行调试 F7:跳出方法 F8:直接跳转到下一个断点 转载自:http://blog.sina.com.cn/s/blog_6271df6f0101d856.html
- iOS开发——开发实战篇&版本控制SVN和Git使用详解
版本控制SVN和Git使用详解 公司的实际开发中,在天朝使用较多的还是SVN,因为SVN是集中式的,在天朝上班你们都懂的! -----------------svn--------- ...
- css3学习总结1--CSS3选择器
CSS3的属性选择器主要包括以下几种: 1. E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的: 2. E[attr$="valu ...
- Android实现电子邮箱客户端
本文主要讲述了安卓平台上利用QQ邮箱SMTP协议,POP3协议发送与接收消息的实现 发送邮件核心代码 import java.security.Security; import java.util.D ...