先了解一些基本知识点:
1.物理分辨率?
答:物理分辨率也叫标准分辨率，是指LED显示屏显示的图像原始分辨率，也叫真实分辨率
2.iPhone(678)的物理分辨率?
得出:常用的iPhone678的出厂分辨率为1334(对开发来说通常不考虑长度),宽度为750物理像素.
3.ppi是什么?
像素密度单位,所表示的是每英寸对角线上所拥有的像素（pixel）数目。手机屏幕的PPI当达到一定数值时，人眼就分辨不出颗粒感了。
4.视网膜屏幕技术是什么?
retina, 意思为分辨率超过人眼识别极限的高分辨率屏幕, 通常在移动设备上使用,例如它将iPhone4的960乘以640的像素压缩到一个3点5英寸（准确应为3.533英寸）的显示屏内。也就是说，该屏幕的像素密度(ppi)达到326左右，称之为“视网膜屏幕”.
5.css像素?
也称为设备独立像素、逻辑像素、设备无关像素，默认情况下在PC端等于一个物理像素,但是在视网膜屏技术中,iPhone678等设备情况下,CSS下的1px,等于4个物理像素(压缩显示) - (可再观察问题4中的插图理解),1个像素点 = 视网膜技术下的4个像素点, 宽高2X2 , 所以就拿宽高来说,相当于放大2倍.
1X1(CSS像素) => 2X2(物理像素)
所以在750的物理像素的宽中,因为视网膜屏技术压缩后,显示为 => 750设备像素 / 2倍后 = 375px (CSS)
6.设备像素比?
一个设备的物理像素与逻辑像素之比：设备像素比 (dpr)＝ 物理像素(dp) / 设备独立像素(dip)
得出iPhone的设备像素比为: 物理像素(750) / 独立像素(375) = 2(设备像素比)
______________________________________
小小的总结一下:
得知iPhone8使用的Retina屏幕技术 , 物理像素比为2 , 视网膜屏压缩了设备像素2倍
使用 2px X 2px的设备物理像素 , 代表的是1px X 1px的CSS像素 ,
所以物理像素为750X1334的时候 , css的逻辑像素为375px X 667px
所以当我们用css书写一张50X50px 的图片的时候,在手机上真正显示出来的物理像素却是为100X100px的效果,
分辨率不够的图片被放大的后, 会变模糊,所以为了解决这个问题了,有了多倍图等技术手段.
______________________________________
(1) 针对于img标签里的图片 , 想要实现一张50X50px的图片被放大后不模糊,可以使用一张100X100px的图,手动设置宽高,缩小为50X50px后,图片再经过物理像素比被放大后,还是展示出原本的清晰度 , 2倍3倍同理(在iPhone的11 12 13pro max等屏幕下,物理像素比能达到3)
(2)针对于背景图的图片,基本和(1)实现原理相同,利用background-size: 100px 100px;修改图片的大小来实现.
7.为什么图片需要处理,而网页的文字不用,且发现网页的文字并不会因为放大而模糊?
先了解矢量:
矢量:既有大小又有方向的量。一般来说，在物理学中称作矢量，在数学中称作向量。在计算机中，矢量图可以无限放大永不变形。
网页上的字是用编码传来的,本地系统的字库是矢量的,本地先计算出矢量字体效果,再贴到网页中,如果放大,CPU重新对其进行计算,格点不会变大,只是变多,所以清晰度不变,甚至会觉得更清晰了, 这也是为什么推荐使用字体图标,因为他的本质是字体, 优势大过精灵图的原因之一.
2022年4月20日00:36:05
练
