基本概念
屏幕尺寸
對角線的長度（英寸）
屏幕分辨率
橫縱向上物理像素的個(gè)數(shù) （物理像素）
屏幕密度
每英寸上物理像素的個(gè)數(shù)（決定高清屏還是普通屏）
視口尺寸
橫縱向上css像素的個(gè)數(shù)
4個(gè)像素、3個(gè)視口、2個(gè)操作、1個(gè)比例
4個(gè)像素
物理像素
屏幕成像的最小單位缕探，一個(gè)物理像素在不同設(shè)備上占據(jù)的面積是不一樣的
css像素
web開發(fā)者使用的最小單位，一個(gè)css像素最終會轉(zhuǎn)成物理像素还蹲。一個(gè)css像素到底占據(jù)多少個(gè)物理像素爹耗，跟屏幕的特性和用戶的縮放行為有關(guān)。這里的屏幕的特性是指普通屏還是高清屏谜喊，實(shí)際上就是像素比潭兽。
????????在不考慮用戶縮放的情況下，
????????沒有viewport標(biāo)簽的時(shí)候斗遏，一個(gè)css像素到底占據(jù)多少個(gè)物理像素山卦？要看這塊屏幕橫向上有多少個(gè)物理像素（屏幕的橫向分辨率）和這塊屏幕橫向上有多少個(gè)css像素（視覺視口的橫向尺寸）。視覺視口的橫向尺寸與屏幕的橫向分辨率的比值就是一個(gè)css像素占據(jù)物理像素的個(gè)數(shù)诵次。
? ? ? ? 有viewport的時(shí)候账蓉，像素比（物理像素和設(shè)備獨(dú)立像素的比例）枚碗，也是物理像素和css像素的比例。
? ? ? ? 考慮用戶縮放的時(shí)候：
? ? ? ? 放大：css像素占據(jù)更多的物理像素
? ? ? ? 縮兄尽：css像素占據(jù)更少的物理像素
設(shè)備獨(dú)立像素
設(shè)備對接css像素的接口肮雨，一旦css像素與設(shè)備獨(dú)立像素掛上鉤，像素比才能發(fā)揮作用箱玷。
(width="device-width")怨规，否則像素比就不起作用。
位圖像素
圖片的最小單位锡足，位圖像素與物理像素一比一時(shí)椅亚，圖片才能完美清晰的展示。
3個(gè)視口
布局視口
決定頁面的布局
視覺視口
決定用戶能看到什么舱污。一個(gè)css像素占據(jù)多少個(gè)物理像素，和視覺視口有極大的關(guān)系弥虐。
一個(gè)視覺視口包含的物理像素的個(gè)數(shù)是固定的扩灯，就屏幕的分辨率、一個(gè)視覺視口包含的css像素的個(gè)數(shù)是不確定的霜瘪，更用戶的縮放行為有關(guān)珠插。
理想視口
設(shè)備獨(dú)立像素的值
2個(gè)操作
用戶
只影響布局視口
系統(tǒng)
影響布局視口和視覺視口
放大：放大一個(gè)css像素的面積，視覺視口的尺寸變小颖对，一個(gè)css像素占據(jù)的物理像素的個(gè)數(shù)變多
縮心沓拧：縮小一個(gè)css像素的面積，視覺視口的尺寸變大缤底，一個(gè)css像素占據(jù)的物理像素的個(gè)數(shù)變少
像素比
官方定義：物理像素/設(shè)備獨(dú)立像素
屏幕在一個(gè)方向物理像素的個(gè)數(shù)與同方向上設(shè)備獨(dú)立像素的比值
當(dāng)加上viewport標(biāo)簽之后顾患，css像素與設(shè)備獨(dú)立像素重合，像素比可以理解為屏幕物理像素與css像素的比值个唧。
3個(gè)意外
1.太大的元素
使用完美視口解決太大的元素超過視覺視口后不出滾動條的問題
<meta name="viewport" content="width=device-width, initial-scale=1.0 ,maximum-scale=1.0 minimum-scale=1.0, user-scalable=no" />
2.width和initial-scale的沖突
誰大聽誰的
在移動端江解，能改變布局視口的尺寸的只有width和initial-scale侧蘸，以及屏幕旋轉(zhuǎn)切換邪蛔。
3.等比問題
沒有viewport的時(shí)候，等比惠奸，但是頁面太小魄梯，字體太小
有viewport的時(shí)候桨螺，不等比。
每一個(gè)css像素在不同設(shè)備上占據(jù)的實(shí)際屏幕尺寸一樣酿秸。但是每一個(gè)css像素在不同設(shè)備上占據(jù)的物理像素個(gè)數(shù)不一樣灭翔。
由此引發(fā)了適配的問題。
