前端二倍图的思考(涉及Retina)

Posted 666666cfh88888888

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端二倍图的思考(涉及Retina)相关的知识,希望对你有一定的参考价值。

EXCELL格式

1 csv格式导出来之后不能用EXCELL打开,会乱码。用记事本打开,然后将“(英文的引号出掉),就可以了。

关于二倍图的操作

概念:

设备像素:也叫物理像素,显示设备上最微小的物理部件。 比如 iphone 5:640 x 1136px. 不同的机型有不同的设备像素,固定死的

这里需要讲一下显示分辨率一定的情况下,显示屏越小图像越清晰,反之,显示屏大小固定时,显示分辨率越高图像越清晰。

  • 高分辨率屏幕:在 Windows 系统下,提高屏幕分辨率一般都是通过提高屏幕尺寸。而随着屏幕分辨率的提升,图像和文字显示目标会相应缩小,造成观看极其不便。
    Retina为什么那么小的屏幕会有那么大的分辨率。为什么那么大的分辨率,非但没有使得文字和图像变小,反而更加清晰了呢?

  • 高像素密度屏幕:高ppi, 以评估的 Retina 视网膜屏幕为例,它并不是像普通显示器那样通过增大尺寸来增加分辨率,而是靠提升单位面积屏幕的像素数量,即像素密度来提升分辨率,这样就有了高像素密度屏幕。并且mac采用了矢量字体。

CSS像素: css pixel。抽象概念,设备无关像素。DIPS,device-independent像素。在标准情况下一个CSS像素对应一个设备像素。

body{
width:2px;
height:2px;
}

 

我们来对比一下这两者的不同
技术分享图片
使用css画了一个2 x 2px的盒子,在普通设备屏幕下是2 x 2px的设备像素。但是在Retina的屏幕下去使用了4 x 4px的设备像素。

device-pixel-ratio:在JS中叫做window.devicePixelRatio
公式: window.devicePixelRatio = 设备像素/css像素。这样,非视网膜屏幕的iphone上,屏幕物理像素320像素,独立像素也是320像素,因此window.devicePixelRatio等于1.
但是在视网膜屏幕的iphone上,屏幕物理像素640像素,独立像素还是320像素,因此,window.devicePixelRatio等于2.

屏幕密度: ppi :每英寸有多少的像素。视网膜屏幕:将960*640的分辨率压缩在,一个3.5英寸的显示屏内。也就是说,该屏幕的像素密度达到326像素/英寸(ppi)。当ppi>300的时候肉眼就无法分辨分辨率了。


技术分享图片

 

为什么需要两倍图/多倍图

1 对于位图而言:

  • 当一个光栅图像在标准设备下全屏显示时,一位图像素对应的就是一设备像素,导致一个完全保真的显示。因为一个位置像素不能进一步分裂,
  • 当在Retina屏幕下时,他要放大四倍来保持相同的物理像素的大小,这样就会丢失很多细节,造成失真的情形。换句话说,每一位图像素被乘以四填补相同的物理表面在视网膜屏幕下显示。

工作原理:

方法一:

利用css样式以及放两倍图。

有一张200x200像素的图片(CSS像素,也就是普通像素点或者说是标准像素点),我们给图片设置一个CSS样式:


img{
width:200px;
height:200px;
}

图片模糊的情况:固定好css像素。将width和height固定好。此时在这个width和height 对于不同的显示器包含的像素已经确定了。然后在两种不同屏幕上放图片:那么Ritina屏幕图片会模糊。因为没有css像素的width height所对应Retina显示器的像素数那么多。你硬生生的把这张图片拉成那么大。必然模糊。
在iPad2或Mini iPad中就是很正常显示的图片;但是,在New iPad中,1个CSS像素点实际上有4个位图像素点,1个分成4个,显然不够分啊,只能颜色近似选取,于是,图片感觉就是模糊的。

 

因此,要想让视网膜屏幕下的图片高清晰显示,我们需要的图片的原始大小不能是200×200像素,而需要2倍高宽,即400×400像素,CSS像素限制依然是:


img {
width:200px;
height:200px;
}

此时,视网膜屏幕下图片就显示OK了(非视网膜屏幕图片被压缩-减少像素取样——资源浪费!)。

 

技术分享图片

方法二:

查询像素密度:准备两种大小但是一样的图片。利用css的媒体查询或者JS的 Retina.js来调取图片。(浏览器支持是一个问题)
1 css:
可以通过“device-pixel-ratio”属性或者其扩展属性“min-device-pixel-ratio”和“max-device-pixel-ratio”。这几个Media Queries可以使用background-image为Retina准备高精密度像素的图片。


.icon {
background-image: url(example.png);
background-size: 200px 300px;
height: 300px;
width: 200px;
}

 

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.icon {
background-image: url([email protected]);
}
}

 

2 js:
Retina.js 来处理。

方法三:

放缩放的矢量图形(浏览器支持是一个问题)

技术分享图片

获得设备像素比后,便可得知设备像素与CSS像素之间的比例。也就是window.devicePixelRatio。
一倍图:当这个比率为1:1时,使用1个设备像素显示1个CSS像素。
二倍图:当这个比率为2:1时,使用4个设备像素显示1个CSS像素,
三倍图:当这个比率为3:1时,使用9(3*3)个设备像素显示1个CSS像素。











































以上是关于前端二倍图的思考(涉及Retina)的主要内容,如果未能解决你的问题,请参考以下文章

移动WEB开发之二倍图

vue的移动端响应式尺寸单位配置/二倍图

移动端页面尺寸之一倍图二倍图三倍图

0074 二倍图:物理像素&物理像素比背景缩放background-size

用一篇文章了解ppi,dpr,物理像素,逻辑像素,以及二倍图

嘿!设计师 前端们说的“雪碧图”是啥?