1.三种方法
rem、百分比、媒体查询
（rem布局一般用于移动端适配；百分比+媒体查询用于移动端适配和PC响应式都可以）
2.自适应和响应式
<1>自适应定义：自适应是为了解决如何在不同大小的设备上呈现同样的网页（网页的主题和内容不改变）
<2>问题：但是，自适应暴露了一个问题，就是当屏幕太小时，即使网页能够根据屏幕大小进行适配，但是内容在小屏幕上显示的过于拥挤。
<3>衍生：响应式正是针对这个问题衍生出的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计、布局和展示的内容可能会有所改变。
<4>结果：所以响应式的概念覆盖了自适应，而且涵盖的内容更多。
<5>对比：
自适应的体验http://m.ctrip.com/html5/
响应式的体验 http://segmentfault.com/
3.具体实现
<1>允许网页宽度自动调整，移动端开发必须写meta标签和viewport
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
<2>媒体查询（它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件）
eg1.
如果屏幕宽度小于400像素（max-device-width: 400px），就加载aaa.css文件。
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 400px)"
href="aaa.css" />
如果屏幕宽度在400像素到600像素之间，则加载bbb.css文件。
<link rel="stylesheet" type="text/css"
media="screen and (min-width: 400px) and (max-device-width: 600px)"
href="bbb.css" />
eg2.
除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
@import url("tinyScreen.css") screen and (max-device-width: 400px);
<3>图片自适应
img { max-width: 100%;}
