自适应布局和响应式布局

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

本身理解的自适应布局是把宽度px值换成百分比，文字px单位换算成em单位，而后解决在不一样大小设备上呈现一样的网页，可是这样屏幕太小，内容看上去就会很拥挤。以为响应式听上去和自适应会差很少。

当时也不懂为何一样的一个页面要设计3版风格(pc,pad,phone)，以为很麻烦，感受不知道从何开始下手。

　　而后就接触到了下面这些内容:

　　一、meta标签的viewport属性

<meta name=”viewport” content=”width=device-width, initial-scale=1,maximum-scale=1″ />

　　视窗宽度width=device-width;

　　视窗缩放initial-scale=1为不可缩放状态      maximum-scale=1 不可放大

　　

　　二、宽度的百分比或原px单位值换算成em单位

　　百分比计算公式：

目标元素宽度  ÷  上下文元素宽度  =  百分比宽度值

　　文字大小换算em计算公式：

目标元素px值  ÷  父元素font-size大小px值 = 结果值em

　　属性值margin， padding等换算成em单位的计算公式：

目标元素px值  ÷  目标元素的font-size大小px值  =  结果值em

 

　　三、媒体查询@media识别不一样的屏幕宽度，并作出不一样的布局样式来展示。

@media screen and (max-width:800px) {}
@media screen and (max-width:600px) {}

 

　　四、图片的自适应

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

 

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

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