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下的程序优化,之前也了解一些,现在查阅一下资料,整理一下. 当然优化有很多种,我本次先说的是执行优化方式. 首先打开我们自己的工程.工程文件若显示为黄色的,则表示此文件默认优化选项 ...
随机推荐
- 对大一新生开始学习C语言课程谈几点看法
大家好,首先祝贺大家进入了大学,迈入了大学的校门,也意味着开始了新的征程,希望大家能够有一个美好的大学四年. 先做下自我介绍,我叫李帅阳,(大家可以称呼我 李老师,或是班助,或是...)这是在邹欣老师 ...
- JQuery $(function(){})和$(document).ready(function(){})
document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)二是onload,指 ...
- 38.输出1到最大的N位数[Print 1 to max number of N bits]
[题目] 输入数字n,按顺序输出从1最大的n位10进制数.比如输入3,则输出1.2.3一直到最大的3位数即999. [分析] 这是一道很有意思的题目.看起来很简单,其实里面却有不少的玄机. [常规思路 ...
- cocos2dx阴影层的实现
效果图 //ShadowLayer.h class ShadowLayer : public CCLayer { protected: ShadowLayer() :m_pRender(NULL) , ...
- google maps js v3 api教程(2) -- 在地图上添加标记
原文链接 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 我们在创建地图 ...
- Quartus 软件的使用之PLL的使用
练习使用Altera FPGA 内的 PLL IP核: 思路:将clk_50M倍频到clk_100M,然后观察100M时钟. 1.生成PLL的核例化文件,然后调用. 点击NEXT之后,等一会会跳出如下 ...
- tar split命令
转自:http://www.cnblogs.com/xiaouisme/archive/2011/05/25/2057435.html tar是文件打包工具,split是文件分割工具,在邮件中发送附件 ...
- ***CI新增记录成功后的返回值判断,是用isset还是empty
Q: 新增记录插入成功后,加了一个return $this->db->insert_id(); $digg_id = $this->m_feed_digg->create(js ...
- 在windows下用toolbox玩会docker
哈哈哈.
- 关于Qt的事件循环以及QEventLoop的简单使用
1.一般我们的事件循环都是由exec()来开启的,例如下面的例子: 1 QCoreApplicaton::exec() 2 QApplication::exec() 3 QDialog::exec() ...