“响应式”和“自适应”是一样的吗？

如图↗

这两种方式看起来非常像，完全可以说是一对双胞胎兄弟，但是，这两人解决问题的方式完全不一样。

老大（响应式）在进行网站页面布局的时候，会考虑到所有可能打开他的设备，比如手机、ipad、华为平板、小米笔记本、2k台式机、4k显示器……等等，老大的目标是让自己的网页布局能够在所有设备上都能够正常且美观的展现。

当然了，老大的目标这么远大，所需要付出的努力自然也不会少。要完成一个网页的响应式布局，开发难度和工作量都很大，所以让老大出手的成本也很高。

相比较老二（自适应）而言，老大多出了一项技能，那就是流式布局。虽然流式布局可能会导致因屏幕大小变化导致元素无法正常显示，但结合媒体查询（@media）来使用，就可以实现页面元素宽度随着窗口调整而自动适配。

综上所述，响应式布局即媒体查询+流式布局，能够根据设备的分辨率自动调整页面排版，能够在所有设备上都能够正常且美观的展现。

接下来玄北说一下咱们的老二——自适应布局

对于大部分前端工程师来说，自适应布局是最适合用于网站开发的一种方式，这种方式也更加被客户所认可，甚至逐渐成为了高端网站的代名词，但是老二终究是老二，在页面排版上，美观效果远远不如咱们的老大——响应式布局。

我们都知道，有很多非自适应的网站都是PC端一套源码、手机端一套源码、iPad端再来一套源码，同样一个网站需要写三套源码才能在电脑、手机、iPad上比较美观的进行展示。而自适应布局，就完美的将这三端融合为一套源码。

在这里就不得不提一下进行自适应布局的“神兵利器”——媒体查询（@media）

@media screen and (max-width: 680px) {
    .box1 {
        background-color:red;
    }
}

如上所示，如果页面宽度小于或等于680像素，.box1元素的背景颜色会变为红色，反之，当页面宽度大于680像素时，.box1元素的背景颜色会变回默认值。

总的来说，我们更加推荐的是响应式布局，虽然开发难度和成本较高，但是一劳永逸且美观高端。