一，自适应和响应式的区别
自适应是一套模板适应所有终端，但每种设备上看到的版式是一样的，俗称宽度自适应。
响应式一套模板适应所有终端，但每种设备看到的版式可以是不一样的。
虽然响应式/自适应网页设计会带来兼容各种设备工作量大、代码累赘、加载时间长的缺点，但它们跨平台和终端，能“一次设计，普遍适用”，可以根据屏幕分辨率自适应以及自动缩放图片、自动调整布局，它们不只是技术的实现，更多的是对于设计的全新思维模式。很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。
自适应还是暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容过于拥挤，响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动。
自适应的体验
响应式的体验
Css秘密花园
二，响应式基础知识
1，设置meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这段代码的几个参数解释：
§width = device-width：宽度等于当前设备的宽度
§initial-scale：初始的缩放比例（默认设置为1.0）
§minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
§maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
§user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
2，媒体查询css3的媒体查询是响应式设计能实现的关键因素。你可以使用媒体查询的特性，来根据设备的宽度，让页面使用不同的css块。
如下的css规则会在屏幕宽度小于等于980时起作用：
@media (orientation:portrait) and (max-width:460px) { .video .innerBox .news a.more { display: none; } .video .innerBox .news span { display: none; } .video .innerBox .news { width: 100%; } .video .innerBox .news ul { width: 100%; text-align: center; } }