响应式资源参考 前端响应式资源

响应式一听就是很高大上的感觉，没入门的时候可能感觉头很大根本无从下手。但是千万不要被其所唬住，根据我的学习经验，响应式其实是很简单的，只要处理好以下两点：

• 断点设置：可以先综合判断要实现各个平台断点，然后再针对一些特殊局部进行单独的断点
• 内容布局呈现：这个可能就比较繁琐，有些时候还得有一定的想象力。

目前响应式社区很活跃，资源也非常多，下面给大家整理下响应式不同方面的相关文章，方便大家有针对性地学习和阅读。

基本认识

• 什么是响应式布局设计？
• viewport 深入理解
• CSS 媒体查询
• 下手响应式及断点设置分析

整体布局

• 浮动布局精华 Layout Gala（参考流体负 margin 布局部分）
• Flexbox Grid（使用 flexbox 的网格布局系统）
• How to build a responsive grid system

内容处理相关

• 响应式导航解析
• video 自适应问题
• 响应式图片处理101系列(共10篇)
• table 处理
• 图片滚动

框架相关

• Bootstrap
• Foundation

工具相关

• 使用Chrome测试页面响应性
• 测试响应和设备特定可视窗口
• Screensiz.es
• Respond.js

其他

• 响应式案例
• 响应式资源汇总
• 书籍：《响应式Web设计-HTML5和CSS3实践》（英文名为：Responsive Web Design width HTML5 and CSS3）作者：Ben Frain

注：一般来说复杂的站点都会单独处理移动端，而不是全兼容从 PC 到 移动端的全兼容，毕竟移动端还是以轻快为主。