进行响应式布局前,你应该先了解的一些东西

DPI(Dots Per Inch)每英寸点数每英寸上有多少点？
PPI(Pixels Per Inch)像素密度,每英寸像素取值每英寸有多少像素？
DPR(Device Pixel Ratio)设备像素比,DPR由浏览器厂商决定
Point(PT)代表人眼实际上看到的一个点,大小不固定,通过像素密度计算得出
Pixel是用来显示图像的屏幕上的像素,是屏幕用来实现point的基本单位,大小不固定
Retina屏的原理其实就是在一个point里塞了更多的pixel

CSS像素

作为web开发者,在CSS里面使用px作为长度单位.这里的px指的是CSS像素.浏览器里的一切长度都是以CSS像素为单位的.在非高清屏幕以及未缩放浏览器的情况下,1CSS像素 = 1物理像素;而在搭载了Retina等高清屏幕(PPI高,一个屏幕上的物理像素点特别多)的设备上,如果1CSS像素仍等于一个物理像素,那么网页上的各种元素就变得非常小,用户将会非常难以辨别,因此高PPI设备中,一个CSS像素通常等于两个甚至三个物理像素(2dpr/3dpr,浏览器自动设定,不同浏览器的设定可能会不一样).

DPR是一个单位,设备有多少DPR除了跟设备本身的PPI有关,也和当前的缩放状态有关.但总的来说并不是前端开发者能够控制的,而是浏览器厂商以及浏览器用户(通过缩放页面)控制的.桌面浏览器上,一个放大到200%的页面(不是高清屏的情况下),一个CSS像素此时等同于两个物理像素,即2dpr.
例子:

• iPhone5 分辨率 640x1136 2DPR 320x568
• iPhone6 分辨率 750x1334 2DPR 375x667
• iPhone6 Plus 分辨率 1242x2208 3DPR 414x736

使用JS获取DPR值

window.devicePixelRatio

视口 viewport

视口在CSS里的定义是根元素的包含块,称为初始包含块.它的宽度是所有CSS百分比宽度推算的根源.(块级元素的默认宽度默认为100%)
在桌面上，是扣的宽度等同于浏览器窗口的宽度，高度即为浏览器窗口的高度。而在浏览器高度通常为240px_{640px的移动设备上也这么做的话，则会非常不方便。为了适应为桌面浏览器设计的网站(这类型的网站使用固定布局,页面核心宽度通常显式地设置在1000px左右),浏览器出现了**布局视口**的概念.与桌面浏览器不同的是,浏览器默认的布局视口宽度与浏览器宽度完全独立.通常是768px}1024px,最常见的是980px(默认布局视口的高度,各个手机各个浏览器没有统一标准),而桌面浏览器的布局视口的尺寸就是浏览器窗口的尺寸(其实桌面浏览器根本没有过"布局视口"这个概念,"视口"就是浏览器的窗口)

bootstrap 分别对应的是小屏幕 768px, 中屏幕 992px, 大屏幕 1200px
这里的768px, 992px, 1200px 都是CSS像素,而不是设备的物理像素,因此bootstrap对与"屏幕尺寸"的定义与设备屏幕的分辨率无关.实际上,这里的尺寸指的是浏览器的布局视口尺寸.

可以在meta标签内指定一个布局视口尺寸,而不是使用默认的尺寸
<meta name = "viewport" content = "width = 320" >
也可以不指定具体宽度
<meta name = "viewport" content = "width = device-width , initial-scale = 1 " >

device-width 告诉浏览器将布局视口的宽度设置为设备最理想的宽度(因为DPR是浏览器决定的,因此最理想的宽度自然也是浏览器决定的).
iPhone6(1334*750),浏览器决定DPR为2,因此最理想的宽度是"750(设备像素)/2 = 375px",布局视口高度则变为1334/2 = 667px.
宽度最理想,意味着用户无需缩放页面.

不同设备有不同的理想宽度(甚至同一设备的不同浏览器都有可能有不同的理想宽度,极为罕见),且随着设备的横放竖放也会有所改变,因此通常不指定特定的尺寸,而是使用 device-width 进行自适应(因此提高DPR),除非在 meta 中设置了 initial-scale = 1.

媒体查询中, min-width, max-width 的查询即是对布局视口宽度的查询.因此若想通过媒体查询来实现响应式设计,应当设置一个设备的布局视口宽度,否则移动端浏览器使用默认布局视口宽度(一般为980px)会使针对视口宽度的媒体查询无功而返.

另有 min-device-width, max-device-width 的查询(本质上是screen.width 的查询),对桌面浏览器的意义不大.在移动端浏览器上,是对不随着设备的横竖屏而改变的设备"最理想宽度"的查询.例如iPhone6的 "device-width" 永远是375px,而它的 "width" 会随着横竖屏而改变.

总结

进行响应式设计大概有以下几个注意点:

1. 通过 meta 标签指定布局视口而不是使用默认的,宽度通常为980px 的布局视口.
2. 通过媒体查询或者 document.documentElement.clientWidth 来根据布局视口的宽度的不同来做设计
3. 通过媒体查询或者 window.devicePixelRatio 来根据DPR的不同来提供分辨率不同的图像