自适应布局和响应式布局

记得第一次实际工作中接触到响应式布局排版之后，老大问了一个问题，自适应和响应式有什么区别吗？

自己理解的自适应布局是把宽度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-width:800px) {}
@media screen and (max-width:600px) {}

 

　　4、图片的自适应

img{max-width: 100%; height: auto;}

 

（伊桑·马科特（Ethan Marcotte）在2010年首先提出了响应式网页设计（RWD,Responsive Web Design）这个术语。在他的一篇文章《Responsive Web Design · An A List Apart Article》中他将已有的三种发开技巧（弹性图片，弹性网格布局，媒体与媒体查询） 进行了整合，命名为响应式网页设计。）

 注：响应式的概念覆盖了自适应，但是涵盖更多的内容。