物理像素/分辨率/逻辑像素/设备像素比/多倍图/1px/viewport

1、像素/物理像素/分辨率

屏幕是一个面，是由很多发光的器材的小点组成的，是在设备出厂时就确定的，是真实存在的，而这一个点就是一个像素/物理像素。一个点对应的真实尺寸也是不相同的，这取决于分辨率和屏幕尺寸。通常人们说设备多少像素多少分辨率，例如800*1200，意思是：横向有800个小点，纵向有1200个小点组成。

2、像素密度（PPI）

像素密度指每英寸长度上的物理像素点个数。

3、设备独立像素/逻辑像素/虚拟像素（pt）

在前端开发中，css像素就是一种逻辑像素，程序员在开发中使用的尺寸单位。

4、打印分辨率

打印机分辨率又称为输出分辨率，是指在打印输出时横向和纵向两个方向上每英寸最多能够打印的点数，通常用DPI（点每英寸）来表示，例如某品牌打印机的分辨率为 600×600dpi。

5、设备像素比（Device Pixel Ratio，DPR）

设备的物理像素与逻辑像素的比，通过window.devicePixelRatio获取，在没有出现Retina 视网膜屏之前，设备像素比一直是1，但是出现之后，一个逻辑像素用两个/三个物理像素点表示，显示也更加高清了。
DPR=2，用2倍图
DPR=3，用3倍图

注意（CSS的1px等于几个物理像素，除了和屏幕像素密度dpr有关，还和用户缩放有关系。例如，当用户把页面放大一倍，那么CSS中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，CSS中1px所代表的物理像素也会减少一倍。）

6、多倍图

多倍图的出现也是因为dpr的原因，dpr为2时，200px200px尺寸的图片，其实是400400物理像素尺寸，也就是说一个位图像素点对应四个物理像素点，而只有一个物理像素对应一个位图像素点时才能够足够清晰，所以dpr为2比dpr为1的需要大一倍的图片，位图像素指图片的最小单位。

7、1px问题

iphone6的屏幕宽度为375px，设计师做的视觉稿一般是750px，在开发中设计图标识的1px其实是一个物理像素的尺寸，所以应该是border:0.5rem；但由于一些浏览器会直接把0.5px解析成0px，所以会出错。

8、viewport

1. 可见视口：指可见的屏幕宽度

window. innerWidth/Height

2. 布局视口：html宽度

document. documentElement. clientWidth/Height

3. 理想视口：当可见视口=布局视口时

<meta name="viewport" 
	content="width=device-width, 
	user-scalable=no,
	initial-scale=1.0,
	maximum-scale=1.0, 
	minimum-scale=1.0"/>

适配解决方案见 移动端适配大总结，包含页面适配、1px问题和多倍图问题

参考链接：https://blog.csdn.net/weixin_30362233/article/details/98507937