1、布局
先创建一个非响应的布局，页面宽度固定大小。然后添加媒体查询（Media Queries）和响应式代码。这种操作方式更容易实现响应式特性，在同一时间专注于一个任务。
然后做如下设置（屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。）
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="HandheldFriendly" content="true">
2 、媒体——视频或图像
1）img
img { max-width: 100%; }
根据客户端的显示大小，显示不同的图像。
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">
使用 data-* 属性来存储替换图像的 URL。然后匹配 min-device-width 条件的媒体指定替换图像：
@media (min-device-width:600px) { img[data-src-600px] {content: attr(data-src-600px, url);} } @media (min-device-width:800px) { img[data-src-800px] { content: attr(data-src-800px, url);} }
2）视频-弹性视频技术
<div class="video-container"> <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe> </div>
.video-container { position: relative; padding-bottom: 56.25%; padding-top:30px; height:0; overflow:hidden;} .video-container iframe,.video-container object,.video-container embed {position:absolute; top:0;left:0; width:100%; height:100%;}
3 、字体
响应式的字体大小应关联它的父容器的宽度，这样它才可以适应客户端的屏幕。
使用 CSS3 规范引入的一个新的单位叫 rem，和 em 类相似（注：ie6不支持rem）。
1）充值html字体
html { font-size:100%; }
2）定义响应式的字体大小
@media (min-width: 640px) { body {font-size:1rem;} }
@media (min-width:960px) { body {font-size:1.2rem;} }
@media (min-width:1100px) { body {font-size:1.5rem;} }
原文：http://www.cnblogs.com/honeyHHX/p/3860931.html