关于响应式布局，bootstrap

Question

在网上看到的这个概念，这里是链接感兴趣的童鞋可以看看：http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

不是讲到说什么width啊，margin啊后面跟的都不可以是px了么，要用百分比。为啥我还能在bootstrap官方网页上看到这样的代码：

body {
     position: relative; /* For scrollyspy */
     padding-top: 50px; /* Account for fixed navbar */
}

是我哪里理解错了吗？

EDIT #1：

google到一篇概念解释的，有兴趣的可以看看（我没看懂。。。）: http://xvfeng.me/posts/adaptive-vs-responsive-layouts-and-optimal-form-field-labels/

Answer 1

是你理解错了。

你混淆了自适应布局和响应式布局。

显然，@PortWatcher 的回答也把两者混淆了，或者说是不全面。

--------- 更新 -------

起初，网页设计者都会设计固定宽度的页面，最开始的电脑显示器分辨率种类不多，因为当时电脑本来就少，即使有变化也是 800 850 870 880。

后来随着显示器越来越多，以及笔记本的普及，这种方式的页面出现了问题。于是出现了一种新的布局方式宽度自适应布局。我们平时谈论的自适应布局，大多指的就是宽度自适应布局。

在这种布局下，出现了两派：

• 百分比宽度布局
• 流式布局

题主说的是第一派，宽度使用百分比，文字使用 em。第二派的布局以 iGoogle 为代表（已经停止）。

再后来，浏览器大战 时代，firefox、Oparo、Chrome …… 出现，结束了 IE 一统江湖的局面，N 年没有更新的 IE6 发布了新版本，以前已 IE 为标准的 CSS 向 W3C 标准趋近，随后各种针对浏览器的 css hack 技术出现。

虽然浏览器这么多，但是响应式布局依然不是主流，人们还在使用 css hack 技术。注意我的用词——「不是主流」，虽然不是主流，不代表当时不被使用。

比如一向超前的伟大的 Google。当时没有响应式布局这个词语，但是慢慢出现了一个词——渐进增强，新词的出现总是伴随的旧词一起出现。就好比 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 相信做过前端的都看过这个网站，一个神奇的网站。

最终的解决方案胜出者是响应式布局。

响应式布局被大家熟知的一个重要原因就是 twitter 开源了 bootstrap。Google 第一次完成了从先驱到烈士。

---------------- 番外篇 ------------

Google 为了解决 android 界面的不统一问题，决定对 android 界面的设计进行规范，这种设计会让 android 变得更流畅，因为它放弃了 iOS 系统那种华丽的界面，iOS7 发布后，Google 完成了第二次从先驱到烈士。

android 开创了扁平化的时代，现在却被指责 android 的图片越来越抄袭 iOS 了。

看看2011年03月22日的文章，Google 官方解释 Chrome logo 变化。

再看看评论：

好好的立体感的logo被做脑残了

老的好看，GOOGLE美工还是不如苹果

直接截图吧。来自 iteye：

--------------- 后记 -------------------

此文为你讲述了自适应布局和响应式布局的历史。更为你讲述了 Google 如何从先驱到烈士的历程。

==终于写完了。

Answer 2

body {
     position: relative; /* For scrollyspy */
     padding-top: 50px; /* Account for fixed navbar */
}

你的这段只是因为bootstrp的顶部的那个nav条条是50，而且是浮动的，如果不在body留出50px的话，下面的东西就会顶上去。。。如果不清楚我在说什么，用调试工具把那个50px去掉就知道了。

Answer 3

响应式布局的意思是根据不同分辨率的设备自动调整布局。
你现在改变你的浏览器的宽度，可以看到segmentfault的前端就是一个响应式布局的例子。

这和用不用px没关系的。

Answer 4

你也可以固定宽度，针对不同分辨率的设备，写不同的布局样式。 所以，自适应和限制宽度为px没有啥关系。

Answer 5

margin, padding之类的还是px的

Answer 6

这很用不用px没关系，只是说布局用百分比，小的比如搜框还是要用相对绝对。响应式布局经常是为多个分辨率写多个css。具体来说是，根据不同的设备设计多套外表，当然大致内容相似，只是做些修剪。都是在第一套就是标准电脑用的那套上改动，用的css3的@media segmentfault或者链接的方法