如题是怎么实现根据不同设备完成响应式显示的
一般来说，自己实现响应式的比较好的方法就是@media查询了，可以适应各种屏幕（用宽度来区分手机、PC等），还可以适应打印机（print）。
看了一下源码，sf的CSS文件有三个，其中
http://static..com/build/global/css/global.css
这个文件看起来像是把normalize.css、fontawesome和bootstrap都整合到了一起（不知道还有没有别的）。normalize.css是用来统一浏览器差异的，而响应式的内容在bootstrap中。在global.css中搜索“.col-”，稍微看看就可以了。
的排版用的是Bootstrap的Grid系统，你用下”审查元素“，看看那些col-开头的css类，你就大体知道是什么原因了。
sf 用的 Bootstrap CSS框架。
可以阅读下这些文档。
http://v3.bootcss.com/css/#grid
http://v3.bootcss.com/getting-started/#support
通过媒体查询可以在不同宽度下设置不同的css属性，如此达到响应效果。
你可以去了解下bootstrap的网格模型
关于自适应:
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
keywords: @media screen max-width