對(duì)于剛接觸移動(dòng)端的適配漆魔，我想最大的困惑應(yīng)該是為什么全部像素不能和pc端一樣按照設(shè)計(jì)稿給定的像素來(lái)處理？
想弄明白上面的這個(gè)問(wèn)題，得先搞明白像素和視口凶异。
像素：中文全稱(chēng)為圖像元素蜀撑。是指在由一個(gè)數(shù)字序列表示的圖像中的一個(gè)最小單位。像素僅僅只是分辨率的尺寸單位唠帝，而不是畫(huà)質(zhì)屯掖。通常以像素每英寸（PPI）為單位來(lái)表示影像分辨率的大小。
適配中需要考慮兩種像素
1.設(shè)備像素
屏幕的物理像素襟衰，任何設(shè)備屏幕的物理像素的數(shù)量都是固定不變的贴铜，單位是pt
2.css 像素
在css、js中使用的一個(gè)抽象的概念瀑晒，單位是px
順便說(shuō)下,css像素也可以稱(chēng)為設(shè)備獨(dú)立像素（device-independent pixels）簡(jiǎn)稱(chēng)為dips绍坝，單位是dp
那么，設(shè)置一個(gè)元素width:200px苔悦，這個(gè)元素便跨越了200個(gè)css元素轩褐，200個(gè)css元素相當(dāng)于多少個(gè)設(shè)備元素取決于兩個(gè)條件
<1>頁(yè)面是否縮放
縮放與設(shè)備像素、css像素的關(guān)系
縮放是在放大或縮小css像素玖详，比如一個(gè)寬度為200px的像素?zé)o論怎樣放大把介，還是200個(gè)css像素。但是因?yàn)檫@些像素被放大了蟋座，所以css像素也就跨越了更多的設(shè)備像素拗踢，縮小則相反。
縮放與視口
視覺(jué)視口:視覺(jué)視口是用戶正在看到的網(wǎng)頁(yè)的區(qū)域向臀，大小是屏幕中css像素的數(shù)量
window.innerWidth/Height 返回視覺(jué)視口的尺寸
縮放會(huì)影響視覺(jué)視口的尺寸巢墅。頁(yè)面被用戶放大，視覺(jué)視口內(nèi)css像素?cái)?shù)量減少券膀；被用戶縮小君纫，視覺(jué)視口內(nèi)css像素增多。
用戶縮放不會(huì)影響布局視口但是設(shè)置縮放
<meta name="viewport" content="initial-scale=2">后芹彬，initial-scale有一個(gè)副作用：同時(shí)也會(huì)將布局視口設(shè)置為縮放后的尺寸蓄髓，所以initial-scale=1與width=devide-width的效果是一樣的
布局視口:一個(gè)沒(méi)有為移動(dòng)端做優(yōu)化的網(wǎng)頁(yè)，會(huì)盡可能縮小網(wǎng)頁(yè)讓用戶看到所有東西舒帮。瀏覽器廠商為了讓用戶在小屏幕下網(wǎng)頁(yè)也能夠顯示地很好双吆，所以把視口寬度設(shè)置得很大，一般在768~1024px之間会前，最常見(jiàn)的寬度是980px好乐。所以在手機(jī)上視口與移動(dòng)端瀏覽器屏幕寬度不再相關(guān)聯(lián)，是完全獨(dú)立的瓦宜，這個(gè)瀏覽器廠商定的視口被稱(chēng)為布局視口蔚万。
布局視口我們是看不見(jiàn)的，只知道網(wǎng)頁(yè)的最大寬度是980px临庇》戳В可以這樣設(shè)置布局視口的寬度:
<meta name="viewport" content="width=640">
媒體查詢與布局視口 ?700px指的是布局視口的寬度
@media (min-width:700px){}
document.documentElement.clientWidth/Height返回布局視口的尺寸
理想視口：布局視口明顯對(duì)用戶是不友好的昵慌，完全忽略了手機(jī)本身的尺寸。所以蘋(píng)果引入了理想視口的概念淮蜈，它是對(duì)設(shè)備來(lái)說(shuō)最理想的布局視口尺寸斋攀。理想視口中的網(wǎng)頁(yè)是對(duì)用戶最理想的寬度，用戶進(jìn)入頁(yè)面的時(shí)候不需要縮放梧田。
如果我們把布局視口的寬度改成屏幕的寬度不就不用縮放了么淳蔼。可以這樣設(shè)置告訴瀏覽器使用它的理想視口：
<meta name="viewport" content="width=device-width">
定義理想視口是瀏覽器的事情裁眯，并不能簡(jiǎn)單認(rèn)為是開(kāi)發(fā)者定義的鹉梨，開(kāi)發(fā)者只能使用。
screen.width/height 返回理想視口的尺寸,有嚴(yán)重的兼容性位圖---可能返回兩種值：
1.理想視口的尺寸(下載瀏覽器)
2.屏幕的設(shè)備像素尺寸(內(nèi)置瀏覽器)
完美視口：
解決各種瀏覽器兼容問(wèn)題的理想視口設(shè)置:
<meta name="viewport" content="width=device-width,initial-scale=1">
<2>屏幕是否為高密度
在縮放程度為100%(這個(gè)條件很重要穿稳，因?yàn)榭s放也會(huì)影響他們)時(shí)存皂，他們的比例叫做設(shè)備像素比（device-pixel-ratio ? ? ?dpr）
dpr = 設(shè)備像素/css像素
可以通過(guò)js得到 dpr : ? ? ?window.devicePixelRatio
所以對(duì)于第一個(gè)問(wèn)題我想現(xiàn)在已經(jīng)有了答案。
在屏幕不縮放的前提下逢艘，dpr決定了我們?nèi)绾螌⒃O(shè)計(jì)稿的的像素轉(zhuǎn)換為css像素旦袋。
10px*10px的圖片在dpr為2的屏幕下顯示為20px*20px，為了不被放大模糊掉它改，所以設(shè)計(jì)稿中這圖片是20px*20px的疤孕。這樣子我們?cè)O(shè)置該圖片的css像素時(shí)為10px*10px，實(shí)際顯示為20px*20px,最終結(jié)果是圖片正常顯示搔课，不會(huì)模糊胰柑。
<3>屏幕像素密度
ppi=√ (window.screen.width∧2 *?window.screen.height∧2)/屏幕尺寸
ppi為160時(shí)截亦，一個(gè)css像素和一個(gè)設(shè)備像素相對(duì)應(yīng)爬泥。
