simpread 二倍图的来由
本文由 简悦 SimpRead 转码， 原文地址 www.jianshu.com
先了解一些基本知识点:
- 物理分辨率?
答: 物理分辨率也叫标准分辨率，是指 LED 显示屏显示的图像原始分辨率，也叫真实分辨率
2.iPhone(678) 的物理分辨率?
得出: 常用的 iPhone678 的出厂分辨率为 1334(对开发来说通常不考虑长度), 宽度为 750 物理像素.
3.ppi 是什么?
像素密度单位, 所表示的是每英寸对角线上所拥有的像素（pixel）数目。手机屏幕的 PPI 当达到一定数值时，人眼就分辨不出颗粒感了。
- 视网膜屏幕技术是什么?
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)
- 设备像素比?
一个设备的物理像素与逻辑像素之比：设备像素比 (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; 修改图片的大小来实现.
- 为什么图片需要处理, 而网页的文字不用, 且发现网页的文字并不会因为放大而模糊?
先了解矢量:
矢量: 既有大小又有方向的量。一般来说，在物理学中称作_矢量_，在数学中称作向量。在计算机中，_矢量_图可以无限放大永不变形。
网页上的字是用编码传来的, 本地系统的字库是矢量的, 本地先计算出矢量字体效果, 再贴到网页中, 如果放大, CPU 重新对其进行计算, 格点不会变大, 只是变多, 所以清晰度不变, 甚至会觉得更清晰了, 这也是为什么推荐使用字体图标, 因为他的本质是字体, 优势大过精灵图的原因之一.
2022 年 4 月 20 日 00:36:05