Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
大多数移动浏览器将html页面放大为宽的视图（viewport）以符合屏幕分辨率，可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度，按1：1的尺寸显示并禁止初始的缩放。在<head>标签里加入这个meta标签。
Media Queries 是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现，假如一个终端的分辨率小于980px，那么可以这样写：
假如我们要兼容ipad和iphone视图，我们可以这样设置：
到目前为止，开发人员用到的字体单位大部分都是像素，虽然像素在普通网站上是Ok的，但是我们仍然需要响应式字体。一个响应式的字体应关联它的父容器的宽度，这样才能适应客户端屏幕。
css3引入了新的单位叫做rem,和em类似但对于html元素，rem更方便使用。rem是相对于根元素的，不要忘记重置根元素字体大小：
宽度需要使用百分比
处理图片缩放的方法
给图片指定的最大宽度为百分比。假如图片超过了，就缩小；假如图片小了，就原尺寸输出：
用：：before和：：after伪元素 +content 属性来动态显示一些内容。在 css3 中，任何元素都可以使用 content 属性了，这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery