1. 像素
一个像素就是计算机屏幕能显示一种特定颜色的最小区域， 屏幕上的像素越多，同一时间你可以看到的就越多。 当设备尺寸相同但像素变得更密集时，屏幕上能显示的画面的过渡更细致。
实际上， 有以下两种像素：
- 设备像素： 设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。
- css 像素：为 web 开发者创造的，在 css/js 中使用的一个抽象层。
加入设置一个元素 width: 100px， 是设置元素跨越了 200 个 css 元素。 200个 css 像素相当于多少个物理像素取决于屏幕特性和用户的缩放行为。放大的越大，一个 css 像素覆盖的物理像素的就越多。
2. 页面缩放
假设一个桌面端浏览器的宽度是 1024px， 这意味着桌面上有 1024个 css 像素。
3. 设备像素比
javascript 中有一个属性 window.devicePixelRatio, css 中也有 device-pixel-ratio 属性，称为设备像素比(Device Pixel Ratio, DPR),
设备像素和理想视口的比。
<meat name="viewport" content="width=device-width">
