有关像素的概念
逻辑像素
逻辑像素、CSS 像素、设备独立像素(DIP)、相对像素这几种说法其实是同一个东西，都是相对且抽象的，单位为 px，具体显示的有多大，要看浏览器的实现，而浏览器的实现需要考虑设备的物理像素、屏幕宽度等因素
物理像素（分辨率）
物理像素是屏幕在真实世界实际存在的点（把屏幕想像成一盏盏小灯聚在一起，物理像素就是灯的数量）
分辨率是描述物理像素的量，一般以 1080x720、320x568 等等这种形式去描述
像素密度：PPI（Pixel Per Inch）
像素密度是单位长度内物理像素点的数量，可用于描述清晰度，又名解析度（resolution），但要区别于分辨率
它是联系真实世界长度的关键量，像素密度越小，我们就越容易看到像素点
举个例子：
若物理分辨率是 axb
像素密度 = √(a2+b2) / 屏幕尺寸
DPI vs PPI
DPI：dots per inch，表示每英寸（对角线长度）能打印上的墨滴数量。最初应用于打印技术中。打印设备多在 300 至 3600 DPI 之间。
PPI：pixels per inch，电子显示设备从打印设备中借鉴了 DPI 的概念，产生了 PPI的概念。即显示器每英寸（对角线长度）上像素点的数量，指像素密度
设备像素比：DPR(device pixels ratio)
因为逻辑像素和物理像素存在区别，css 里写的逻辑像素要按一定的比例转换成物理像素，这个比例就是 DPR
DPR = 物理像素 / 逻辑像素
通常，物理像素比逻辑像素多
Viewport
viewport 是浏览器的概念，它在 PC 端和移动端表现有差异，甚至在不同的浏览器上表现也有差异，这里只介绍大多数情况
PC端
viewport 指的是浏览器可视区域大小，使用CSS像素为单位，可以通过 document.documentElement.clientWidth 获取
同样可以通过 window.innerWidth 获取，区别在于后者把垂直滚动条算进去了，或者说前者是<html>这个标签块的宽度
关于缩放
缩放 是通过调节DPR实现的。放大时，DPR增大，viewport 会减小（因为只能看到局部页面了）；缩小时反之。
CSS 百分比出现的问题
若设置 html > div 宽度为 100% ，指的是 100% <html>块的宽度 = viewport 宽度（所以会导致一个问题：父级元素使用百分比样式，子级元素使用px样式时可能会导致溢出，因为100%是相对html块的，这个块是可以通过拉伸浏览器窗口变化的，不一定能够容纳内部固定px的元素）
移动端
移动端因为尺寸问题，把viewport 分为了两个部分
- Layout Viewport（布局视区）：整个文档可视区域大小，也就是<html>块的大小，可以通过 document.documentElement.clientWidth 获取
- Visual Viewport（可视视区）：当前正在查看的 Layout Viewport 部分大小，可以通过 window.visualViewport（chrome）或 window.innerWidth（safari） 获取
⚠️ 注意：这两个参数的获取在各大浏览器之间存在兼容性问题
此外还有一个概念：Ideal Viewport，指的是设备的屏幕宽度，只由设备决定。它的存在是因为移动设备的分辨率种类非常多，应用开发时不可能去适配每一种分辨率，应该让移动设备厂商去尽可能地适配320/375/400px等常用的屏幕宽度（依赖反转），通过 DPR 将屏幕宽度映射到物理分辨率****。
这三个量都是以 设备独立像素（CSS像素） 为单位
关于缩放
移动设备通过 scale 参数进行缩放
scale = Ideal Viewport Width / Visual Viewport Width
屏幕宽度不变，可视视区在变
举个例子：
- 页面缩小时，Scale 减小，即 Visual Viewport 增大，可以看到的 Layout 变大了（内容便多了）
- 页面增大时，Scale 增大，即 Visual Viewport 减小，可以看到的 Layout 变小了（内容变少了）
转换关系
