主要使用如下基本技术要素：
viewport meta标签, 可以在浏览器中禁止zoom排版，根据设备大小自动剪裁，包括字体大小和垂直空间布局大屏幕设备采用grid布局，小屏幕设备缺省使用单列针对特定代理做一定的设计折中通过使用这样的技术策略，可以达到良好的网页屏幕自适应效果，尽可能消除不同屏幕尺寸上用户体验的落差。
如果符合上面的设计，header看起来会是这样： <!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <meta charset="UTF-8" /> <title></title> <meta name="viewport" content="width=device-width" /> <link rel="stylesheet" type="text/css" media="screen" href="core.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-width:640px)" href="grid.css" /> <!--[if lte IE 8]> <link rel="stylesheet" type="text/css" media="screen" href="ie/core.css" /> <link rel="stylesheet" type="text/css" media=”screen” href="grid.css" /> <![endif]--> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> </head> 我们把它分解成和响应式WEB设计对应的部分，首先是基础的html文档类型. 有些人会把它称作HTML5，实际上就是一个简洁的文档类型声明。 <!DOCTYPE html> 接下来是一个meta标签。名字为viewport，值为width=device-width。 比如，在iPhone的Safari上，默认宽度为980px，这导致即使内容仅仅是自适应宽度的文本，页面也被缩小呈现。 这个meta标签禁用zoom功能并提供宽度刚好的文本显示。 <meta name="viewport" content="width=device-width" /> core.css样式表是排版、定位和可复用组件样式的主要源文件，core.css不应该包含颜色、边线、背景图片这些元素， 下面是一个样例轮廓，以伪代码描述： - Basic typography, but ideally no styling at all. Instead rely on the user-agent. @media screen, projection { - Minimal resets if any - Basic typography such as font family. Provide a stack back to serif and sans-serif. - Reusable component styles e.g. boxes, comments, meta information on an article, etc } @media screen and (max-width:480px) { - Typography for phone screens e.g. font-size, font-size-adjust, line-height } @media screen and (min-width:480px) { - Typography for tablet and desktop screens e.g. font-size, font-size-adjust, line-height } @media screen and (min-width:960px) { - Constrain the content width to 960px or some similar width - Center the page in the screen } @media screen and (min-width:1600px) { - Large screen design. Highly dependent on use case. } 一旦设备尺寸超过640px，我们引入一个包含grip布局声明的样式表文件。这可以是960.gs，blueprint grid, YUI grids, OOCSS grids, 或者homespun grid。 必须注意到html文档已经被grid样式中的类标记了，只是在屏幕尺寸没有超过960px时，不起作用。这就是小屏幕单列布局变换成grid布局的秘密。 <link rel="stylesheet" type="text/css" media="screen and (min-width:640px)" href="grid.css" /> 对于ie8以及之前的版本而言，响应式设计会遇到麻烦，因为ie8某种程度上说是还只是停留在桌面系统上工作的浏览器，尽管仍然占有很大的市场和关注度。 ie8不能识别高级的媒介查询条件，比如上面grid.css样式表中所用到的(min-width: 640px)，因此除了这个grid样式表，我们同时也加载一个ie重载样式表。 <!--[if lte IE 8]> <link rel="stylesheet" type="text/css" media="screen" href="ie/core.css" /> <link rel="stylesheet" type="text/css" media=”screen” href="grid.css" /> <![endif]--> 一些老版本的现代浏览器(Firefox, Safari 以及Opera)可能也只是有限制的支持媒介查询条件， 尽管用户通常会保持这些浏览器版本的更新，但如果grid布局在某些版本的浏览器中需要得到支持，有很多polyfill脚本，比如jQuery Media Helpers。 什么是polyfill，请参阅：http://remysharp.com/2010/10/08/what-is-a-polyfill/ 在不使用grid布局的情况下，页面缺省以单列呈现，尽管不尽完美，但至少可以访问。 最后，响应式WEB设计应该把文档结构(core.css)和纯粹的页面风格(style.css)，如字体、边界、背景图片、渐变、文本变换等区分开来。 <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> 上面所列的代码，还是一个在不断试验和发展中的响应式设计，随着时间的推移，以及设备的发展，这里表述的设计本身也将得到发展。 不过这可以成为开展我们自己工作的一个好的起点。 资源链接： 1 Response web design examples: http://mediaqueri.es/ 2 Ethan Marcotte’s article: http://www.alistapart.com/articles/responsive-web-design/ 3 Hard Boiled Web Design by Andy Clark: http://hardboiledwebdesign.com/ 4 Polyfills: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills -iefreer-