记得第一次实际工作中接触到响应式布局排版之后，老大问了一个问题，自适应和响应式有什么区别吗？
自己理解的自适应布局是把宽度px值换成百分比，文字px单位换算成em单位，然后解决在不同大小设备上呈现同样的网页，但是这样屏幕过小，内容看上去就会很拥挤。觉得响应式听上去和自适应会差不多。
当时也不懂为什么同样的一个页面要设计3版风格(pc,pad,phone)，觉得很麻烦，感觉不知道从何开始下手。
然后就接触到了下面这些内容:
1、meta标签的viewport属性
<meta name=”viewport” content=”width=device-width, initial-scale=1,maximum-scale=1″ />
视窗宽度width=device-width;
视窗缩放initial-scale=1为不可缩放状态 maximum-scale=1 不可放大
2、宽度的百分比或原px单位值换算成em单位
百分比计算公式：
目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度值
文字大小换算em计算公式：
目标元素px值 ÷ 父元素font-size大小px值 = 结果值em
属性值margin， padding等换算成em单位的计算公式：
目标元素px值 ÷ 目标元素的font-size大小px值 = 结果值em
3、媒体查询@media识别不同的屏幕宽度，并做出不同的布局样式来展现。
@media screen and (max-800px) {} @media screen and (max-600px) {}
4、图片的自适应
img{max-width: 100%; height: auto;}
（伊桑·马科特（Ethan Marcotte）在2010年首先提出了响应式网页设计（RWD,Responsive Web Design）这个术语。在他的一篇文章《Responsive Web Design · An A List Apart Article》中他将已有的三种发开技巧（弹性图片，弹性网格布局，媒体与媒体查询） 进行了整合，命名为响应式网页设计。）
注：响应式的概念覆盖了自适应，但是涵盖更多的内容。