自适应体验http://m.ctrip.com/html5/响应式体验http://segmentfault.com/整理了几篇自适应和响应式本文已摘编修改，请欣赏：起初，网页设计师会设计具有固定宽度的页面。一开始电脑显示器分辨率的种类不多，因为那时候电脑很少，即使有变化也是800850870880。比如OpenSourceChina的网页定制了固定宽度998，至于为什么是998，请@甜蜜后来随着显示器越来越多，笔记本的普及，这样的页面出现了问题。于是出现了一种新的布局方式宽度自适应布局。我们平时说的自适应布局，多是指宽度自适应布局。在这种布局下，有两种思想流派：PercentageWidthLayoutStreamingLayout题目说的是第一种，width用百分比，text用em，现在很多人开始用rem，也就是所谓的高清解决方案。第二派的布局以iGoogle为代表（已停产）。一开始并没有响应式布局这个词，后来逐渐出现了一个词——渐进增强，新词的出现总是伴随着旧词出现。就像在3G出现之前，没有人把自己的手机称为2G，所以3G和2G这两个词一起出现了（技术上当然是2G技术先出现）。同理，在渐进增强出现之后，也出现了另一个词“优雅降级”。词义可以自行参考wiki和google。我这里只举个例子，gmail和qqmail。两者的宽度都是100%，都是自适应的。但是：qqmail是csshack的完美体现。你几乎可以用任何浏览器看到相同的邮箱。腾讯前端工程师使用各种csshack技术来展示邮箱页面，统一用户体验。而gmail采用的是渐进式增强，你的浏览器越强，你看到的效果越好，用户体验越好。后来大名鼎鼎的谷歌发布了android，互联网大战就从PC转到了手机。还有HTML5标准的发布。手机的屏幕虽然变小了，但是提供的功能却更多了。还记得您使用诺基亚访问QQ的时间吗？我们访问了3g.qq.com。当时我用中兴手机访问wap.qq.com。后来，我用智能手机访问了m.qq.com。有人不禁要问“我真的需要为每个手机设计一个单独的网页吗？”，“我真的需要为手机和电脑设计不同的网页吗？”当然，有很多解决方案。可以看看csszengarden（《Css秘密花园》还是一本很好的书，而且还有网址http://www.csszengarden.com/，值得一读），相信做过的人前端见过这个网站，一个神奇的网站。最终的解决方案赢家是响应式布局。响应式布局广为人知的一个重要原因是twitter开源了bootstrap。谷歌第一次从先驱变成了烈士。从直观的角度来看，响应式和自适应的区别：首先，两者解决问题的方式不同。Adaptive就是解决同一个网页如何在不同尺寸的设备上呈现。手机屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度一般都在1000像素以上（目前主流的宽度是1366×768），有的已经达到2000像素。将相同的内容在不同尺寸的屏幕上呈现出令人满意的效果，并不是一件容易的事。很多网站的解决方案是针对不同的设备提供不同的网页，比如提供手机版或者iPhone/iPad版。这样做保证了效果，但是比较麻烦，而且需要同时维护几个版本，而且如果一个网站有多个入口（入口），会大大增加架构设计的复杂度。因此，早就有人设想是否可以“一次设计，通用应用”，让同一个网页自动适配不同尺寸的屏幕，并根据屏幕尺寸自动调整网页内容大小。屏幕宽度。但无论如何，它们的主要内容和布局都不是。改变。响应性的概念应该包括自适应，它涵盖的内容更多。适配还是暴露了一个问题。如果屏幕太小，即使网页可以根据屏幕大小进行适配，但在小屏幕上看还是会觉得内容过于拥挤。响应性是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度并对网页设计进行相应的调整，布局和显示的内容可能会发生变化。如果下面的网址，屏幕宽度大于1300像素，则6张图片排成一排。如果屏幕宽度在600px和1300px之间，则将6张图像分成两行。如果屏幕宽度在400px和600px之间，导航栏会移动到网页的头部。如果屏幕宽度小于400像素，则将6个图像分成三行。在mediaqueri.es上有更多这样的例子。说了很多，其实大家可能更关心的是如何实现。下面说说实现方法：1、“自适应网页设计”是如何让网页的宽度自动调整的？其实并没有那么难。首先，在网页代码的头部添加一行viewportmeta标签。
