知乎用户 ，距離をおいてこそ、自分の大きさを知る
原文链接：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">