segmentfault是怎么实现根据不同设备完成响应式显示的

Question

如题segmentfault是怎么实现根据不同设备完成响应式显示的

Answer 1

一般来说，自己实现响应式的比较好的方法就是@media查询了，可以适应各种屏幕（用宽度来区分手机、PC等），还可以适应打印机（print）。
看了一下源码，sf的CSS文件有三个，其中

http://static.segmentfault.com/build/global/css/global.css

这个文件看起来像是把normalize.css、fontawesome和bootstrap都整合到了一起（不知道还有没有别的）。normalize.css是用来统一浏览器差异的，而响应式的内容在bootstrap中。在global.css中搜索“.col-”，稍微看看就可以了。

Answer 2

segmentfault的排版用的是Bootstrap的Grid系统，你用下”审查元素“，看看那些col-开头的css类，你就大体知道是什么原因了。

Answer 3

keywords: @media screen max-width

Answer 4

sf 用的 Bootstrap CSS框架。
可以阅读下这些文档。

http://v3.bootcss.com/css/#grid
http://v3.bootcss.com/getting-started/#support

Answer 5

通过媒体查询可以在不同宽度下设置不同的css属性，如此达到响应效果。

Answer 6

你可以去了解下bootstrap的网格模型

关于自适应:
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html