响应式一听就是很高大上的感觉,没入门的时候可能感觉头很大根本无从下手。但是千万不要被其所唬住,根据我的学习经验,响应式其实是很简单的,只要处理好以下两点:
- 断点设置:可以先综合判断要实现各个平台断点,然后再针对一些特殊局部进行单独的断点
- 内容布局呈现:这个可能就比较繁琐,有些时候还得有一定的想象力。
目前响应式社区很活跃,资源也非常多,下面给大家整理下响应式不同方面的相关文章,方便大家有针对性地学习和阅读。
基本认识
整体布局
- 浮动布局精华 Layout Gala(参考流体负 margin 布局部分)
- Flexbox Grid(使用 flexbox 的网格布局系统)
- How to build a responsive grid system
内容处理相关
框架相关
工具相关
其他
- 响应式案例
- 响应式资源汇总
- 书籍:《响应式Web设计-HTML5和CSS3实践》(英文名为:Responsive Web Design width HTML5 and CSS3)作者:Ben Frain
注:一般来说复杂的站点都会单独处理移动端,而不是全兼容从 PC 到 移动端的全兼容,毕竟移动端还是以轻快为主。