知乎用戶 ，距離をおいてこそ、自分の大きさを知る
原文鏈接：http://www.zhihu.com/question/35221839
ppi 1英寸顯示物理像素 決定一個屏幕上的總物理像素點的多少
ppi越高，相同物理尺寸的圖像顯示的越小 物理像素/ppi=？英寸
瀏覽器決定dpr=2（1css像素=多少物理像素） dpr*css像素=物理像素，使得物理像素/ppi不會過小
手機設備物理像素
瀏覽器決定的dpr
網頁css像素
像素（Pixel） 物理像素（設備像素）
1英寸所擁有的物理像素數目（ Piexel per inch PPI）=根號（橫向Pixel的平方+縱向Pixel的平方）/屏幕尺寸
屏幕尺寸：屏幕對角線的長度。
一個顯示屏的PPI越高，說明在同一大小的屏幕可以顯示更多物理像素，能給圖像提供更多細節。
CSS像素
CSS文件中的px是指CSS像素。瀏覽器里的一切長度是以CSS像素為單位。
注意1css像素等於多少物理像素。
非高清屏幕和瀏覽器未縮放 1css像素等於1物理像素
具有高清屏幕的設備 1css像素等於2到3個物理像素（取決於不同的瀏覽器設定）
此時，若css像素仍舊等於1物理像素，會使得網頁上的各種元素變得非常小，用戶很難看清。
1英寸顯示物理像素 200 CSS像素 800 4英寸
讓1CSS像素等於2物理像素即dppi=2
800*2=1600 8英寸
1英寸顯示物理像素 100 CSS像素 800 8英寸
如果一個css像素占用n個物理像素，那么我們就說此時的dppx數為n.
設備有多少dppx和設備本身的PPI有關，也和瀏覽器廠商以及當前瀏覽器用戶通過縮放頁面控制的縮放狀態有關。
桌面瀏覽器上，一個放大到200%的頁面（假如設備不是高清屏），一個CSS像素此時等同於兩個物理像素。
dppx可以看做devicePixelRatio(設備像素比DPR)，由瀏覽器廠商確定。
IE11及一下版本不支持這個單位，因此使用dpi（Dots per inch）代替。1ddpx=96dpi
dpi有設備的物理dpi和做Web開發時的dpi的區別。
因此兼容性號的媒體查詢寫法是：
$media (min-resolution:192dpi),(-webkit-min-device-pixel-ratio:2),
(min--moz-device-pixel-ratio:2),(-o-min-device-pixel-ratio:2),(min-resolution:2dppx)
{
}
視口viewport
css定義 <html>元素的包含塊，它的寬度是所有CSS百分比寬度推算的根源。
（塊級元素寬度默認為100%）
桌面上：viewport的寬度等於瀏覽器窗口的寬度，高度為瀏覽器窗口的高度
移動設備:瀏覽器寬度通常為240px-640px
移動設備瀏覽器默認的布局視口寬度與瀏覽器寬度完全獨立。通常為768px-1024px,最常見的是980px
移動設備瀏覽器默認的布局視口高度不重要
bootstrap分別對應的是小屏幕768px;中屏幕992px,大屏幕1200px
單位px暗示是CSS像素而不是設備的物理像素。
因此BOOTSTRAP對”屏幕尺寸“的定義與設備屏幕的分辨率無關，實際上指的是瀏覽器的布局視口尺寸。
<meta name="viewport" content="width=device-width,initial-scale=1”/>
width=device-width告訴瀏覽器把瀏覽器的布局視口寬度設置為設備最理想的寬度（和DPR一樣，由瀏覽器決定）
不同的設備有不同的理想寬度（同一設備的不同瀏覽器也有可能擁有不同的理想寬度，但是現象罕見）
且隨着設備的橫放豎放有所改變，因此通常不指定特定的尺寸，而用device-width自適應。
當設備橫放豎放改變時，最佳dpr不變，布局視口寬度從“手機寬度/最佳DPR”變為“手機長度/最佳DPR”，
且因為布局視口寬度有變，瀏覽器會進行一次重排。
不過ios上的safari在旋轉時不會改變布局視口的寬度（因此dpr提高了），除非在meta指令中設置了initial-scale=1
媒體查詢中，min-width,max-width的查詢是對布局視口寬度的查詢。
因此若想通過媒體查詢來實現響應式設計，應當設置一個設備的布局視口寬度，否則移動瀏覽器使用默認布局視口寬度一般是980px，會使針對寬度的媒體查詢無功而返。
總結 響應式設計的注意點
1通過meta標簽指定布局視口而不是使用默認的，寬度為980px的布局視口
2 通過媒體查詢或者document.documentElement.clientWidth來根據布局視口的寬度的不同來做設計
3通過媒體查詢或者window.devicePixelRatio來根據DPR的不同提供分辨率不同的圖像
如果不想像淘寶那樣指定一個固定寬度又想完美設置文字大小，一般說來就是用rem來做單位，然后在多個媒體查詢后只改動html元素內的font-size值。
樓下補充：
作者：Vkki
鏈接：http://www.zhihu.com/question/35221839/answer/61755216
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
point 代表人眼實際看到的一個點，大小不固定，通過像素密度計算得出。
pixel 是用來顯示圖像的屏幕上的像素，是屏幕用來“實現” point 的基本單位，大小不固定。
舉例來說
- iPhone 5 分辨率 320x568，屏幕像素 640x1136，@2x
- iPhone 6 分辨率 375x667，屏幕像素 750x1334，@2x
- iPhone 6 Plus 分辨率 414x736，屏幕像素 1242x2208，@3x
后面的 @2x 其實就是像素密度，代表 1pt = 2px 。
要適配 iPhone 6，其實只需要查詢 width:375 就可以了， 而不是 750，因為分辨率其實是考慮了 像素密度的。
所以，哪怕手機屏幕的像素變成 192000*108000，只要手機的實際大小還是那么大，一樣能被查詢到。
鏈接：http://www.zhihu.com/question/35221839/answer/68520787
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
- 我的項目要適配pc，平板，手機，各種型號
- 使用bootstrap的柵格系統，通過container,row,col-lg-x,col-md-x,等完成在不同屏幕尺寸上的布局，並不一定要用它的樣式，具體看柵格系統。
- 高分辨率手機和retina，你不用管，記住手機尺寸的查詢基本都是在col-xs-x下的，平板尺寸基本是在col-sm-x下的就行了
- 我的項目只在移動設備上使用，不用適配pc，或大屏幕。
- 布局上使用flex彈性布局，或百分比，移動設備瀏覽器內核基本為webkit或safari,放心使用即可。 可以看阮老師的Flex 布局教程
- 頁面具體元素上，比如某個按鈕，某個圖片，如果要自適應的話，在高寬上使用rem,前提是在html中設置font-size,一般設置為
這樣就可以在不同的設備分辨率下，通過js或其他手段動態改變font-size的值，來改變所有使用了rem元素的尺寸。
html{font-size:62.5%}/*1rem就代表10px*/ - 高分辨率手機和retina，你不用管。
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">