什么是自适应网站建设？

自适应是指处理和分析过程中，根据处理数据的数据特征自动调整处理方法、处理顺序、处理参数、边界条件或约束条件，使其与所处理数据的统计分布特征、结构特征相适应，以取得最佳的处理效果。

起初，网页设计者都会设计固定宽度的页面，最开始的电脑显示器分辨率种类不多，因为当时电脑本来就少，即使有变化也是 800 850 870 880。比如 传诚信的网页就是固定宽度为998来定制的。后来随着显示器越来越多，以及笔记本的普及，这种方式的页面出现了问题。于是出现了一种新的布局方式宽度自适应布局。我们平时谈论的自适应布局，大多指的就是宽度自适应布局。

在这种布局下，出现了两派： 百分比宽度布局，流式布局

题主说的是第一派，宽度使用百分比，文字使用 em，现在也很多开始使用rem了，也就是所谓的高清方案。第二派的布局以 iGoogle 为代表（已经停止）。 一 开始没有响应式布局这个词语，但是慢慢出现了一个词——渐进增强，新词的出现总是伴随的旧词一起出现。就好比 3G 出现之前，没人管自己的手机叫 2G，所以，3G 和 2G 两个词是一起出现的（技术上当然2G技术先出现）。同理，渐进增强出现后，另一个词「优雅降级」也随之出现了。 词的意思可以自己看 wiki、Google，我只在这儿举一个例子，gmail 和 qqmail。

他俩的宽度都是 100%，都是自适应。但是： qqmail 就是 css hack 的完美体现，你用任何一个浏览器，几乎可以看到同一个样子的邮箱，腾讯的前端工程师们用各种 css hack 技术来展示邮箱页面，为的是统一的用户体验。 而 gmail 使用了渐进增强，你的浏览器越强，你看到的效果就越好，用户体验就越好。 再后来，就是大家都熟知的 Google 发布了 android，于是互联网大战从 PC 打到了手机。还有 HTML5 标准的发布。 手机虽然屏幕变小了，但是却提供了更丰富的功能。还记得以前用诺基亚上 QQ 的事儿吗？我们访问的是 3g.qq.com，当时我使用的是中兴的手机，访问 wap.qq.com，在后来的智能手机都是访问 m.qq.com。 不 禁有人问「真的需要为每个手机分别设计一个网页吗？」、「真的需要为手机和电脑设计不同的网页吗？」，解决方法当然有很多种，可以看看 css zen garden（《Css秘密花园》还是很不错的一本书，也附带有网址https://www.csszengarden.com/，值得一看）， 相信做过前端的都看过这个网站，一个神奇的网站。 最终的解决方案胜出者是响应式布局。 响应式布局被大家熟知的一个重要原因就是 twitter 开源了 bootstrap。Google 第一次完成了从先驱到烈士。

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

自适应是为了解决如何才能在不同大小的设备上呈现同样的网页手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。

很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。

于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整网页内容大小但是无论怎样，他们主体的内容和布局是没有变的。

响应式的概念应该覆盖了自适应，而且涵盖的内容更多。

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

什么是响应式（自适应）网站

所谓的响应式网站设计， 用最通俗的语言来讲，就是通过一个唯一的网址，唯一的一份网站内容，唯一的一份网站代码，通过CSS3媒体查询方式，可以在多种浏览器设备上进行一致的浏 览。响应式站点设计的目的是期望网页设计和网页编码能够对用户的操作行为和环境进行合理的响应，而这种响应应建立在用户的浏览器屏幕大小、操作平台等。

例如，微软的官方网站能够在桌面浏览器上显示符合桌面互联网浏览布局的内容展示形式，而在平板电脑、智能手机上则可以根据屏幕的变化而自动调整内容的布局和尺寸，让用户可以在平板电脑和智能手机上也获得桌面浏览器上的一致体验。

响应式（自适应）网站的优点

1、提升用户体验

响应式网站考虑了不同的终端下不同分辨率下的显示效果，如果移动设备浏览传统网站，由于没有对移动设备进行过优化处理，所有体验效果相对会比较差，响应式网站设计，根据不同分辨率都会出现的显示效果都进行了现对调整，大大提高了用户浏览的体验效果。

2、节省时间和成本

响应式技术，虽然有时在规划阶段非常耗时，但是从长远来看可以帮助开发人员节约时间。使用响应式技术，不需要专门为移动设备重新设计网站和重定向。这可以使网站更新变得更简单，因为一个更新就可以解决所有的设备。

3、对seo 更加友好

响应式设计会提高搜索引擎权重。因为一个响应式网页设计只有一个URL，而不是多个页面指向移动设备，避免搜索引擎因重复内容而降低权重。Google也建议优先采用响应式设计，因为无论是什么网页版本都是相同的HTML、相同的内容，Google最容易处理。

响应式（自适应）网站的缺点

1、对老版本IE 兼容不好

对于ie8及以下版本的ie浏览器兼容不太好，由于响应式网页布局采用html5+css3的一些新特性,而ie8及以下的浏览器对这些都不支持，这些影响都只是局限于pc机上，而pc机一般都是正常的分配率浏览，所以这些影响都并不是大问题！

2、移动端浏览浏览量会产生更多流量

由于响应式网站，基本都考虑了不同终端显示分辨率下的显示效果，所以代码量会相对较高，同时对于移动端的浏览，一些图片并没有针对移动端进行过优化，所有会产生相对较多的流量

哪些网站适合响应式设计

1. 移动App开发者的公司网站和单独的App网页；2. 希望充分利用互联网的初创型公司网站；3. 外贸型企业网站；4. 新式的电子商务网站；5. 面向消费者和大众市场的品牌企业网站；6. 新兴互联网媒体和网上社区类网站；7. 传统媒体向移动互联网数字化过渡的网站改版；8. 任何不想放弃移动互联网用户的商家和个人网站。