响应式网站需要考虑哪些分辨率？

好多人做响应式网站有一个误区，认为 Media Query 查询的是 px，但其实是 pt。

point 和 pixel 是两个概念。

---------------------------------------------↓此处有误↓---------------------------------------------

point 是一种印刷单位，代表人眼实际看到的一个点，它的大小是固定的，永远是 1/72英寸（约 0.353 毫米）。

pixel 是用来显示图像的屏幕上的像素，它的大小是不固定的。

---------------------------------------------↑此处有误↑---------------------------------------------

经 @Shaopeng 指出，此处有误，手机屏幕的 point 和印刷行业的 point 有所区别，在此深表歉意。（不知为何 at 不上）

-----------------------------------------------↓更正↓-----------------------------------------------

point 代表人眼实际看到的一个点，大小不固定，通过像素密度计算得出。

pixel 是用来显示图像的屏幕上的像素，是屏幕用来“实现” point 的基本单位，大小不固定。

-----------------------------------------------↑更正↑-----------------------------------------------

Retina 屏的原理其实就是在一个 pt 里塞了更多的 px。

举例来说

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，只要手机的实际大小还是那么大，一样能被查询到。

要适配 iPhone 6，其实只需要查询 width:375 就可以了，而不是 750，因为分辨率其实是考虑了像素密度的。

使用 Chrome 的响应式工具可以看到像素密度的差异。

举例2：

举例，iphone 4，物理分辨率为 960*640。

为 2 倍缩放的屏，4 寸屏， 那ppi 为 314，那你就当是 480*320 用， 当遇到图片时注意使用 2 倍长宽的，这样对应每个物理像素，图像才不至于模糊。

===============

如某早期安卓手机，分辨率为 720*480, 也 4 寸屏，那ppi 也约为300的，那也当 2 倍缩放的屏，那就当是个 360*240 的屏吧， 同样， 遇到图片注意用 2 倍长宽的， 对应每个物理像素。

===============

再看某旗舰机， 1920*1080 物理分辨率，5 寸， ppi 为 441, 那为 3 倍缩放， 按640*360对待，哎嘛，用图得用 3 倍长宽高的了，这就把人烦死咧，一旦 2k 屏一普及， 这就往 4 倍缩放去了，网速上不去上 4 倍长宽图只会让网页更卡。

===============

再看个 iphone 6, 1334*750, 泥妹， 这是什么分辨率？搞死用（adaptive 自适应 与 320 定宽）的前端的节奏，你看看 iphone 6 刚出来的淘宝网就知道了。那时似乎还是按 320 宽做的。

这个 屏是个 4.7寸的， ppi 还是314, 那还是个 2 倍缩嘛，那当 667*353 用，图还是用 2 倍长宽的。爱疯6呀爱疯6，够了昂。。

===============

楼上 Shaopeng 童鞋的那个图很棒嘛。

记住，手机物理分辨率不等于浏览器分辨率。

Screen Resolution ≠ Browser Window

https://css-tricks.com/screen-resolution-notequalto-browser-window/

===============

bootstrap, 第一可定制断点，第二， 768以下的屏都可以考虑 那个 container-fluid 容器嘛， 用 responsive 的响应式风格布局， 而不要用 adaptive 的自适应风格布局。

具体可以参考 bootstrap 的定制页与下面这个文章。

http://blog.froont.com/9-basic-principles-of-responsive-web-design/

案例3：

其他回答都说的很好，原理什么的我不想深究，这里给大家提供一点简单粗暴的解决方案，一点经验，供大家参考。

我的项目要适配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,一般设置为

html{font-size:62.5%}/*1rem就代表10px*/

这样就可以在不同的设备分辨率下，通过js或其他手段动态改变font-size的值，来改变所有使用了rem元素的尺寸。

高分辨率手机和retina，你不用管。

以上都不要忘了添加