1.幾個基本像素

? ? 物理像素（屏幕分辨率）

????CSS像素

????設備像素：設備獨立像素，可以認為是計算機坐標系統中的一個點，代表一個程序使用的虛擬像素（eg:css像素），然后由相關系統轉化為物理像素。

? ? 位圖像素：1個位圖像素占據1個物理像素，圖片才能完美清晰的展示，否則失真。

2.像素比

? ? =一個方向上占滿一塊屏幕需要的物理像素個數/一個方向上占滿一塊屏幕需要的設備獨立像素個數

? ? 當寫上meta標簽后，width=device-width，使css像素與設備獨立像素鏈接了起來，即css像素等同于設備獨立像素

3.移動端視口

? ? 布局視口：控制整個移動端的布局

? ? 視覺視口：決定用戶能看到的頁面

????理想視口

?3.獲取視口

????Element.clientWidth表示元素內部的寬度，包括內邊距但不包括垂直滾動條（布局視口）

? ? window.innerWidth包括垂直滾動條（視覺視口）? ?

? ? window.screen.width 移動端返回理想視口，pc端返回分辨率

4.縮放

放大：1個css像素的面積變大，區域內css像素的個數變少，視覺視口的尺寸變小

在pc端 用戶縮放影響視口的尺寸

在移動端，用戶縮放影響視覺視口的尺寸，不會影響布局視口

系統縮放參照于理想視口進行縮放，改變布局視口和視覺視口

完美視口能處理太大的元素

<meta name="viewport"content="width=device-width，initial-scale=1.0 minimum-scale=1.0,maximun-scale=1.0,

user-scale=no,height=device-height,target-densitydpi=device-dpi"/>