像素：
对于像素有两个概念，一个是物理像素，一个是逻辑像素。
物理像素是由屏幕自身决定的，一旦屏幕生产出来后其物理像素就固定了，我们知道屏幕之所以能够显示图像，是因为屏幕上排布着密密麻麻的小光点，通过这些光点呈现各种的色彩而显示出不同的图像，其中一个物理像素的大小就等于屏幕上光点分布的间距。
逻辑像素是抽象的，是存在于设计稿中的，也就是 CSS 中的 1px 的概念。它与设备像素是独立的，两者并不会相互影响。
但是我们编码用的是逻辑像素，而呈现在屏幕上需要涉及物理像素，所以我们需要知道每个设备中逻辑像素与设备像素之间的转换关系，所以就引出了 DPR 的概念，DPR 也是自设备屏幕出厂就已经确定了的。每个设备都有各自的 DPR。DPR 可以表示设备像素与逻辑像素的关系，其公式定义为：DPR = 逻辑像素宽度/物理像素宽度. 比如拥有 Retina 屏幕的 iPhone6，它的 DPR = 2, 所以在 iPhone6 中，1个CSS像素宽度等于2个设备像素宽度。
viewport
viewport 概念最早是由苹果公司提出来的，以便于移动端的响应式开发。在移动端开发中主要有两个宽度的概念：viewport 宽度和设备宽度。
viewport宽度， 主要应用于移动端，在 iPhone 手机中，viewport 的宽度一般为980px，在安卓手机中 viewport 的宽度一般为800px；网页中的宽度是以 viewport 的宽度为基准的。
设备宽度，在设备出厂时就确定了。
理想视口：在移动端开发中，我想让网页尽可能的呈现在设备屏幕中，而又不想页面宽度过大，致使水平滚动条，所以理想的视口一般就是 viewport 宽度等于设备宽度的 viewport 。
一般的操作就是在 <head> 中加入 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
解释：
- width：指的是 viewport 的宽度
- initial-scale：初始缩放因子，
viewport宽度 = 设备宽度/缩放因子 - maximum-scale：缩放因子上界
- minimum-scale ：缩放因子下界
- user-scalable：是否可以缩放页面。
tips： width 和 initial-scale 都可以设置 viewport 宽度，写其中一个也是可以的，一起写是考虑到浏览器兼容性问题，因为有些浏览器不支持 width 或 initial-scale 。但是如果一起写的话，需要注意的是，当两者计算出来的 viewport 宽度不相等时，取最大的值作为 viewport 的宽度。
文献
- https://blog.csdn.net/Marmara01/article/details/88619464
- https://juejin.im/post/5a910349f265da4e9449cffd#heading-7