自适应网站和响应式网站的区别，科普一下

很多人经常会对响应式布局和自适应式布局产生混淆，今天将为大家介绍这两者到底表示的是什么以及它们之间的区别。具有一定的参考作用，希望对大家有所帮助。
1、什么是自适应网站？
2011年，网页设计师Aaron Gustafson在他的书《自适应网页设计》里率先提出了自适应网页设计的概念。
自适应网站即使用不同设备浏览时呈现不同的网页，网页内容及版式风格或相似或完全不同，和PC端属于不同的网站模板，数据库内容或相同一致，或独立不同，目的在于为了符合访客的浏览，即通过宽度来调整网页内容的大小，来达到不同大小的设备所看到的网站内容及布局都是一样的。
形象的说就像是同一张照片，其大小按照不同比例缩放来展示。针对一些优化人员，更习惯于做到数据库同步，使PC端的网址和内容与移动端的网址和内容一一对应。
特点：内容拥挤体验不好，开发需要一套UI即可。
2、什么是响应式网站？
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式网站即使用不同的设备浏览网站时，网站样式风格、内容和网址都是完全一样的，PC端和移动端属于同一个网站模板，数据库完全一致，也非常符合搜索引擎的优化规则。即在网站上的页面，由于采用响应式的布局，可以在任何设备上无障碍显示，但是网页的样式早已根据响应式的布局转变成专为其他设备所准备的样式。
响应式网站概念覆盖了自适应，而且涵盖的内容更多。在手机等设备上浏览，网页与PC端内容相似，但布局是自动改变为专为手机等其他设备所准备的。
特点：体验更好
3、自适应和响应式的区别
自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。手机的屏幕比较小，宽度通常在600像素以下，pc的像素一般在1000像素以上，部分配置高的笔记本在2000像素以上的也有，同样的页面要显示在不同的设备上面，还要呈现出满意的效果，不是一件容易的事情。
因此就有人想出了一个办法，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕的宽度，自动调节网页的内容大小，但是无论怎么样子，他们的主体的内容和布局是没有变化的。
响应式的概念是覆盖了自适应，但是包括的东西更多。
响应式布局是解决如何根据屏幕的大小自动调整页面的展现方式，以及布局。自适应还是暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容过于拥挤，响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动。
4、自适应网站与响应式网站如何选择？
在此之前，我们先了解一下网页布局的几种类型：
静态布局（static layout）
流式布局（Liquid Layout）
自适应布局（Adaptive Layout）
响应式布局（Responsive Layout）
弹性布局（rem/em布局）
如果只做pc端，那么静态布局（定宽度）是最好的选择；
如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；
如果pc、移动要兼容，而且要求较高，那么响应式布局是很好的选择。