基本概念：
屏幕尺寸：
屏幕對角線長度（英寸） 1英寸=2.54cm
屏幕分辨率：
橫縱向上像素點數（物理像素）
屏幕密度：
每英寸上物理像素個數
高清屏：
- 一種具備超高像素密度的液晶屏；
- 同樣大小屏幕上顯示物理像素點數由一個變爲多個，
- 高清屏和普通屏相比，相同區域的物理像素點，高清屏是普通屏的4倍
視口尺寸：
代表橫縱向上css像素個數
4個像素 3個視口 2個操作 1個比例
4個像素：
物理像素：
(屏幕分辨率)設備成像最小單位，橫縱向上像素點數
一個物理像素佔據的實際屏幕尺寸，在不同設備上是不一樣的。
css像素：
瀏覽器的最小單位，抽象單位（css像素->物理像素）
一個css像素最終會轉換成物理像素在屏幕成像。
一個css像素到底佔多少個物理像素，和誰有關？
屏幕特性 用戶縮放行爲
* 不考慮用戶縮放：
沒有viewport：
這塊屏幕橫向上佔據多少個物理像素
這塊屏幕橫向上佔據多少個css像素
有viewport：
像素比=一個方向上佔據一塊屏幕所需要的物理像素的個數 /
一個方向上佔據一塊屏幕所需要的css像素的個數
* 考慮用戶縮放：
放大：1個css像素佔據更多的物理像素
縮小：1個css像素佔據更少的物理像素
設備獨立像素：（也稱密度無關像素）
可認爲計算機座標系中的一個點，
這個點代表一個可以由程序使用的虛擬像素，然後由相關係統轉換爲物理像素。
設備對接css像素接口，一旦css像素與設備獨立像素掛上鉤（width=device-width）,
此時像素比才能發揮作用。
位圖像素：
圖像的最小單位
位圖像素與物理像素1：1時，屏幕才能清晰展示圖像
3個視口
佈局視口：
（layout viewport）決定頁面佈局
可以通過document.documentElement.clientWidth來獲取
視覺視口：
（visual viewport）決定用戶能看到什麼
一個css像素佔據多少個物理像素和視覺視口有極大的關係
一個視覺視口包含的物理像素個數是確定的（分辨率）
一個視覺視口包含的css像素個數是不確定的，和用戶縮放行爲有關
視覺視口的寬度可以通過window.innerWidth 來獲取，
但在Android 2, Oprea mini 和 UC 8中無法正確獲取。
理想視口：
設備獨立像素所代表的值（加meta標籤之後）；
只有是專門爲移動設備開發的網站，纔有理想視口這一說。
而且只有當在頁面中加入viewport的meta標籤，理想視口才會生效。
<meta name="viewport" content="width=device-width" />
這一行代碼告訴我們，佈局視口的寬度應該與理想視口的寬度一致
2個操作(放大和縮小)
用戶的：隻影響視覺視口
系統的：影響視覺視口和佈局視口
放大：
放大一個css像素的面積，視覺視口尺寸變小，
一個css像素包含的物理像素個數變多
縮小：
縮小一個css像素的面積，視覺視口尺寸變大，
一個css像素包含的物理像素個數變少
1個比例(像素比)
像素比：
（DPR）(devicePixelRatio)
物理像素/設備獨立像素
可通過window.devicePixelRatio獲取（兼容性問題嚴重）
像素比 =
一個方向上佔據一塊屏幕所需要的物理像素的個數 /
一個方向上佔據一塊屏幕所需要的設備獨立像素的個數 ;
當寫上<meta width='device-width'>時，
css像素與設備獨立像素連接起來。
即:
像素比 = 一個方向上佔據一塊屏幕所需要的物理像素的個數 /
一個方向上佔據一塊屏幕所需要的css像素的個數
3個意外
1.太大的元素
使用完美視口解決太大的元素超過視覺視口後不出滾動條的問題
完美視口：width=device-width initial-scale=1.0
2.width=device-width和initial-scale的衝突，誰大聽誰的
3.等比問題：
沒有加name爲viewport的meta標籤
一個相同css像素大小的區域在不同的設備是等比的,（像素比）
在不同的設備上佔據的實際物理大小（英寸）不一樣
頁面展示太小，用戶體驗不好
加name爲viewport的meta標籤
一個相同css像素大小的區域在不同的設備是不等比的,
在不同的設備上佔據的實際物理大小（英寸）是一樣的
等比是不是一個必須的需要？
百分百還原設計圖
---> 在不同設備上要等比（文字要完美清晰的展示）
----> 必須加meta標籤（不等比）
---> 適配！！！！（加上meta標籤後也得等比）
理解
css像素能不能代表一個設備的大小？如果能代表，這個值確不確定?
能 不確定
屏幕大小之間的比較應該使用絕對單位:屏幕尺寸（對角線長度）
物理像素與css像素比例的維護是誰在維護？維護規則是什麼？
視覺視口(1.決定用戶能看到什麼；2.包住整個佈局視口)
物理像素:屏幕的分辨率
css像素: 佈局視口尺寸
加name爲viewport的meta標籤
像素比
沒有加name爲viewport的meta標籤
佈局視口尺寸 / 屏幕的分辨率
四個像素之間的關係
設備獨立像素
物理/設備像素
css像素
位圖像素
* 物理像素和設備獨立像素:
像素比: 一個方向上佔據一塊屏幕所需要的物理像素的個數 /
一個方向上佔據一塊屏幕所需要的設備獨立像素的個數 =2;
* 物理像素和位圖像素:1:1的時候才能完美清晰的展示
* 物理像素和css像素
普通屏:1比1
高清屏:
加name爲viewport的meta標籤
像素比
沒有加name爲viewport的meta標籤
佈局視口尺寸 / 屏幕的分辨率
* css像素和設備獨立像素
沒有加name爲viewport的meta標籤:沒有關係
加name爲viewport的meta標籤:可以認爲css像素就是設備獨立像素
* 注意@2x 和 @3x圖的使用
像素比 到底是什麼
* 像素比: 一個方向上佔據一塊屏幕所需要的物理像素的個數 /
一個方向上佔據一塊屏幕所需要的設備獨立像素的個數 ;
* 當寫上<meta width='device-width'>時，
css像素與設備獨立像素連接起來。即
像素比=一個方向上佔據一塊屏幕所需要的物理像素的個數 /
一個方向上佔據一塊屏幕所需要的css像素的個數
理想視口什麼時候出現？ 像素比什麼時候有用？
加name爲viewport的meta標籤
理想視口與設備之間的關係
理想視口的尺寸：設備獨立像素所代表的值
不同瀏覽器在同一設備上理想視口的尺寸可能會不一樣
一款瀏覽器在不同設備上理想視口的尺寸可能會不一樣
思考視口的主線
本質上三個視口的物理尺寸就是屏幕尺寸
在不一樣的情況下，各個視口所包含的css像素的個數是不一樣的
佈局視口包含的css像素的個數
980 1024 （瀏覽器不一樣）
視覺視口包含的css像素的個數
默認情況（css像素和物理像素1:1）---> 屏幕的分辨率
移動端瀏覽器初始化的時候（視覺視口必須要包住佈局視口）
---> 佈局視口包含的css像素的個數就是視覺視口所包含的
用戶縮放（隻影響視覺視口）
放大---> 視覺視口包含的css像素的個數變少
縮小---> 視覺視口包含的css像素的個數變多
理想視口包含的css像素的個數
設備獨立像素所代表的值
縮放
* pc端的縮放:會改變元素的佈局（佈局視口）
* 移動端（縮放只改變視覺視口內css像素的個數）
* 放大
使css像素變大，一個css像素所包含的物理像素的個數變多，元素變的更大
視覺視口內，css像素的個數變少
* 縮小
使css像素變小，一個css像素所包含的物理像素的個數變少，元素變的更小
視覺視口內，css像素的個數變多
怎麼獲取三個視口的值
* 佈局視口：(基本沒有兼容性問題)
document.documentElement.clientWidth
* 視覺視口：（有一點兼容性問題）
window.innerWidth
* 理想視口：（兼容性問題極大）
screen.width
完美視口以及meta標籤
過大的元素--->完美視口
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
哪些操作會影響佈局視口
width=device-width
initial-scale
重力感應（橫豎屏切換）
等比問題
沒有加name爲viewport的meta標籤
一個相同css像素大小的區域在不同的設備是等比的,
在不同的設備上佔據的實際物理大小（英寸）不一樣
加name爲viewport的meta標籤
一個相同css像素大小的區域在不同的設備是不等比的,
在不同的設備上佔據的實際物理大小（英寸）是一樣的
等比是不是一個必須的需要？
百分百還原設計圖 ---> 在不同設備上要等比（文字要完美清晰的展示）
----> 必須加meta標籤（不等比）
---> 適配！！！！（加上meta標籤後也得等比）
meta標籤
<meta name="viewport" content="width=device-width,initial-scale=1.0,
minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />