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

宋丹丹丹
  • 96

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

回复
阅读 2.5k
6 个回答

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

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

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

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

keywords: @media screen max-width

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏