响应式布局和自适应布局的不同

起初，网页设计者都会涉及固定宽度的页面，后来随着显示器越来越多，以及笔记本的普及，这时固定宽度的web页面就无法满足，各设备的要求，于是就出现了一种新的布局方式————宽度自适应布局。我们平常讨论的宽度自适应布局，大多指的就是宽度自适应布局。这种布局出现了两种流派：百分比宽度布局 和 流式布局。
百分比宽度布局是：宽度使用百分比，文字使用em，现在也很多使用rem了，也就是所谓的高清方案。
流式布局是：以Google为代表的方法，渐进增强。不过已经停止了。

---

一开始并没有响应式布局这个词语，但是慢慢就出现了一个词——渐进增强，新词的出现总是伴随的旧词一起出现，就好比3G网络出现之前，没人知道自己手机用的是2G网络。所以3G和2G是一起出现了，技术上当然是2G技术先出现。同理，渐进增强出现之后，另一个词[优雅降级]也随之出现了。

不禁有人问，「真的要给每一个手机分别设计一个网页吗？」，「真的要给电脑PC和手机分别设计不同的网页吗？」

那倒不用 响应式布局 就可以搞定

响应式布局和自适应的区别：

1.首先两种的方式的解决问题是不一样的。

自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。手机的屏幕比较小，宽度通常在600像素以下，pc的像素一般在1000像素以上，部分配置高的笔记本在2000像素以上的也有，同样的页面要显示在不同的设备上面，还要呈现出满意的效果，不是一件容易的事情。因此就有人想出了一个办法，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕的宽度，自动调节网页的内容大小，但是无论怎么样子，他们的主体的内容和布局是没有变化的。

2.响应式的概念覆盖了自适应，但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局。

3.自适应还是暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容过于拥挤，响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动。

4"自适应网页设计"的核心，就是CSS3引入的Media Jquery模块。
它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

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

说了一大堆，其实大家可能更多的是关心如何去实现。下面来聊一聊实现方式：