响应式设计工作原理
本文根据 Gustav Jorlöv 的 What makes responsive design work 翻译，无法保证译文完全正确。
在这篇简短的介绍中，我想让你了解一下使响应式web设计成为可能的机制。我不是要深究一些不必要的细节，而是在web开发人员能受益的程度下解释概念。我还想提一下，不同浏览器行为不同，特别是在Android的自由领域里，但是这篇短文不会涉及如何处理浏览器兼容性问题，因为那本身是一个完整的故事。
首先，web浏览器是什么?
web浏览器是一个计算机程序，用户可以查看并与网页交互。从技术上讲，浏览器（如Google Chrome或Firefox）是一个在当前操作系统上运行的计算机程序。这个程序可以处理窗口管理、标签、书签之类的事情。它还使用一个“渲染引擎”来计算界面中应该显示的内容。浏览器会收到一个url(通常是用户在地址栏中输入或单击一个链接)，然后将url传递给渲染引擎，连同用于绘制界面的surface窗口表面。
从历史上看，浏览器做的渲染任务通常稍有不同。这是一个独立的话题，但让我们继续讨论我们的话题并前进。
响应网页设计
根据维基百科的说法，响应式web设计是一种网站设计的方法，旨在为用户提供最优的浏览和交互体验 —— 跨越多种设备（从桌面电脑显示器到移动设备）的缩放、平移和滚动操作最少的轻松阅读和导航体验。对web开发人员来说，就是我们需要完全控制屏幕区域，以及我们置于屏幕区域上的界面必须有合适的大小来进行交互和查看。
但是移动屏幕和桌面屏幕的大小和比例不同，而且它们有不同类型的输入设备。这意味着需要为目标屏幕和输入设备定制界面。
从代码入手
让我们深入了解一些代码。假设网页标签和样式如下：
<html>
<head>
<style type="text/css">
#something{
width: 35%;
background-color: red;
}
</style>
</head>
<body>
<div id="something"><p>Hello</p></div>
</body>
</html>
div #something将具有父元素<body>的35%的宽度，<body>元素将占用<html>元素的100%宽度。那么，<html>元素有多宽?
视口
web布局的最上层构建块称为视口viewport。它容纳着<html>元素。它是渲染引擎的工作的外层界限。
处理响应式web设计时，对视口的控制使我们能够为所有屏幕大小提供界面。
让我们创造移动互联网
假设你有让互联网在移动屏幕上运行良好的任务。为移动端而优化的移动浏览器和网页都不存在。为了使“移动互联网”流行起来，它肯定需要让每个现有网页都可用，或者至少是接近。因此，在尝试响应式web设计之前，我们需要先处理现有的内容。
现有的网页是如何工作的
网页采用固定像素大小、百分比表达式和其他度量来设计样式。考虑页面一侧的一个菜单，该菜单使用百分比宽度设计。在移动屏幕上，可能变成一个狭窄带，没有一个文本适合这个狭窄带。（你可能会注意到，我省略了“高度”，那是因为网页高度通常是可变的，而且在处理响应式设计时不像宽度那样重要。）
在移动设备上，渲染引擎需要相信目标区域比物理上要宽。因此界面可以被绘制成比手机更多像素。然后画布被放大，以完整的在屏幕上显示界面。
你可能已经猜到了，我们需要修改viewport。在逻辑上，viewport会得到移动浏览器的宽度，也就是移动设备的物理宽度。但它不是，它得到了另一个由浏览器生产者决定的宽度。这一宽度在浏览器和设备供应商之间有所不同，但跨度为 768-1024px。如果一个移动浏览器告诉渲染引擎它的宽度是980px，那么例子中的div #something将被渲染为980px的35% = 343px宽。然后，以980px绘制的界面会被放大以适应移动设备。这样，现有网页就能正确地呈现在移动浏览器上，但是我们还没有涉及任何响应式行为。
关于更高分辨率的说明
最近的计算机屏幕和移动设备的模型通常有着比以前的模型更高的分辨率。逻辑上，更密集的像素会使界面以比以前小的尺寸被绘制出来。但我们知道不是这样，当Mac用视网膜显示屏时，网页并没有缩小到一半大小。我们寻找的抽象概念叫做devicePixelRatio。
尝试在浏览器控制台中输入devicePixelRatio，结果是什么?最近的Macbooks显示结果为2，之前的Mac为1。但它可以是任何小数。这个数字会影响到传递给渲染引擎的宽度。对于一个具有devicePixelRatio = 2的屏幕，在进入渲染引擎之前，物理像素数会除以2。这样，一个1400物理像素的浏览器只会将1400 / 2 = 700px传递给渲染引擎。这就是为什么不需要手动处理屏幕分辨率就能以同样的方式来解析针对700px设计的CSS的原因。
想象一下，若干年后，不再有任何设备使用devicePixelRatio = 1。以没有任何设备会拥有的像素大小为目标编写CSS会显得很奇怪。
是什么使移动设备与桌面不同?
让我们为刚才讨论的内容介绍一些适当的名称。viewport，在桌面浏览器上它与浏览器窗口的宽度相同（尽管在更高分辨率的屏幕上可能不同）。在移动设备上则有点复杂。
Layout, visual and ideal viewport布局、视觉和理想视口
渲染引擎在所谓的布局视口上工作，而设备的物理像素构成了视觉视口，（我们在CSS中声明的媒体查询的目标是布局视口）。
第三个也是最后一个viewport，ideal viewport，是一个特定设备的最佳布局视口的抽象概念。理想视口可能是物理像素physical pixels / devicePixelRatio，但在许多情况下与此稍有不同。幸运的是，开发人员有一个简单的方法使用理想视口:
<meta name="viewport" content="width=device-width,initial-scale=1">
这个声明是viewport元标签，它位于HTML的<head>部分中。width=device-width命令告诉渲染引擎在渲染网页时使用理想视口作为布局视口。这个meta标签有更多的选项，由Peter-Paul Koch在Quirksmode总结。
进阶阅读
现在你对媒体查询的工作方式，以及一些关于移动设备web开发的挑战的历史有所了解了。这篇短文并没有涵盖媒体查询的实际使用，我提供了一些与进一步阅读和更全面的指南有关的好链接。