自适应与响应式的区别？

       随着显示器的越来越多，以及笔记本的普及，逐渐出现了新的布局方式：百分比宽度布局和流式布局。这里先说一下这两种布局的区别：

•     百分比宽度布局：宽度使用百分比，文字使用em,更多的使用rem,也就是所说的高清方案。
•     流式布局：以Google为代表的渐进增强，流式布局，如float等float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

       接下来回归正题，这两种方式的解决问题是不一样的，自适应是为了解决如何才能在不同大小的设备上呈现相同的页面。手机屏幕的宽度一般在600像素以下，PC一般在1000像素以上，部分配置高的在2000像素以上，那么就让同一张网页自适应不同大小的屏幕，根据屏幕的宽度自动调节网页的内容大小，而它们主题的内容和布局是没有变化的。

自适应（Adaptive design）:不同设备的代码是不一样的，

响应式（Responsive design）：所有设备的代码是一样的。

• 允许网页的宽度自动的调整
• 尽量少使用绝对的宽度，多点百分比
• 相对大小的字体：不要使用px写死，最好使用相对大小的em,或者高清方案rem,这个单位不限制于字体，别的属性也可以这么设置
• 选择加载CSS，

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />

意思是如果屏幕宽度小于400像素，就加在tinyScreen.css文件。 

那么自适应的实现方式有哪些呢？

• 网页宽度自动调整，在网页代码的头部加入一行代码，

<meta name="viewport" content="width=device-width, initial-scale=1" /> 

viewport是网页默认的宽度和高度，这行代码的意思是网页宽度默认等于屏幕宽度（width=device-width）,原始缩放比例（initial-scale=1）,即网页初始大小占屏幕面积的100%。

• 少使用绝对宽度，使用百分比来替代，当然也可以配合CSS的cal，进行计算宽度。
• 选择加载CSS，自适应网页的核心是CSS3引入的Media Query模块，它的意思就是自动探测屏幕宽度，然后加载相应的CSS文件，

<link rel="stylesheet" type="text/css"  
　　　　media="screen and (max-device-width: 400px)"  
　　　　href="tinyScreen.css" /> 

• CSS的@media规则，同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则，

  @media  screen and (max-device-width: 400px) {  
    
  　　　　.column {  
  　　　　　　float: none;  
  　　　　　　width:auto;  
  　　　　}  
    
  　　　　#sidebar {  
  　　　　　　display:none;  
  　　　　}  
    
  　　} 

• 图片的自适应，只需要一行代码，img{ max-width: 100%; },这行代码对于大多数嵌入网页的视频也有效，可以写成img,object{ max-width: 100%; },老版本的IE不支持max-width,所以只好写成img{ width: 100%; };此外windows平台缩放图片时，可能出现图片失真现象，可以尝试IE的专有命令，img{ -ms-interpolation-mode: bicubic;},或者Ethan Marcotte的imgSizer.js，

  addLoadEvent(function() {  
    
  　　　　var imgs = document.getElementById("content").getElementsByTagName("img");  
    
  　　　　imgSizer.collate(imgs);  
    
  　　});