一直有点模模糊糊的。为什么有的图片在不同屏幕下显示的效果不一样，有的清楚，有的模糊，有的大有的小

今天我要彻底给他搞明白

不牵扯太多的概念，主要是让自己理解

● 屏幕分辨率

简单理解，就是横着竖着能放多少像素点。

比如320 * 640 就是横着最多放320个点，竖着能放640个点。

这个像素点我们认为他们都是一样的大小的正方形

● 图片分辨率

也是一样的，横着有多少个像素点，竖着有多少个像素点

● 屏幕大小

这个很好理解，屏幕有多宽，多高呗。都是长度单位

比如宽5.8厘米，高115厘米。不过生产屏幕的厂商一般用对角线，去衡量屏幕的大小。

因为屏幕都是四四方方的。比如苹果4的手机大小3.5英寸（英寸：长度单位）,这个3点5就是对角线的长

● 图片宽高

这个宽高就有点不一样了。不一样在哪里呢，在这个图片，你想做成多宽，多高都可以。

不像屏幕每一个手机都是固定死的。

我们可以先讨论下图片宽高的问题。比如一个图片的分辨率是 50 50。我们打印在 一个50mm * 50mm的纸上 和 50cm * 50cm的纸上

效果一样吗？（这里我们不考虑打印机的问题）。50mm * 50mm的纸更小。打印机打出一个像素是宽1mm。另外一个是宽1cm。所以50mm * 50mm

上面的像素点更小。像素点大 ，你看着就像马赛克一样。当然不清楚了。像素点小，你感觉不到像素点。眼睛就认为比较清晰。所以大的图片

不清晰，小的图片比较清晰。

上面是打印，我们在屏幕上显示很类似。

我们举个例子A屏幕，B屏幕一样大（宽高都一样，注意这里是屏幕真实的宽高）。屏幕分辨率不一样

A:320 640, B：640 1280。这样图片（假设和屏幕像素点，和图片像素点是对应的）显示在A屏幕上就会显得

比较大，B屏幕上比较小。那这样看来B屏幕上比较清晰。

但是事情没那么简单。css像素并不是简单的物理像素。比如上面的图片，在两个上级屏幕上一个大一个小怎么办，程序员还这么去布局。

所以苹果公司第一个提出一个概念DPR，啥叫DPR，简单理解就是，CSS一个像素 = 几个真实像素。这里不是比总数，是比宽或者高（因为像素是正方形，所以都一样）、

比如一个CSS像素在宽度上等于两个真实像素。那这DPR就等于2，叫做2倍屏。宽度3倍就叫做3倍屏。

还是比如A屏幕和B屏幕

A：一个CSS像素等于1个物理像素，叫1倍屏

B: 一个CSS像素等于2个物理像素，叫2倍屏

那现在我们设置 图片50 * 50像素大小的 CSS width: 50px; height: 50px;

A屏幕和B屏幕上显示大小是一样的（因为DPR）。

如果在A屏幕上显示那么：正好一个屏幕像素对应一个图片像素。看起来没有上面不正常。

但是B屏幕呢：好像有点不正常。因为2倍屏，用了4个像素去表现一个图片像素。但又说不出哪里不对。

这四个像素所占的面积和前面一个像素所占的面积大小是一样的啊，为什么会不清晰呢？

根本原因就是：图片的每一个像素不可再分。它只能占一个物理像素，那它现在有4个物理像素怎么办。只能放大，也许浏览器还有补帧啥的。

但是还是一样的大的 4个像素的宽高还是和一个像素宽高一样啊！所以肉眼看起来，应该没啥区别啊

这里我是这样理解的：在你放大每个图片像素的时候，这个图片像素就有损失。丢失或者增加一些东西。变得和以前不一样了，就模糊了。

经查询，可能是图像“平滑处理”的原因。每个像素不可再分，根据相邻颜色，什么算法，在像素之间插入新的像素，使之成为原来像素数量的4倍。（在dpr=2的情况下）。

这种“平滑处理会使图片变得模糊”

哎 我大概只能这样理解，也不知道是不是在钻牛角