像素：
對於像素有兩個概念，一個是物理像素，一個是邏輯像素。
物理像素是由屏幕自身決定的，一旦屏幕生產出來後其物理像素就固定了，我們知道屏幕之所以能夠顯示圖像，是因爲屏幕上排布着密密麻麻的小光點，通過這些光點呈現各種的色彩而顯示出不同的圖像，其中一個物理像素的大小就等於屏幕上光點分佈的間距。
邏輯像素是抽象的，是存在於設計稿中的，也就是 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