适配及响应式

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%;}