之前也接触过响应式开发，大概就是下载一个响应式网站模板，然后替换图片，哈哈！
确实没有系统的学习和了解过响应式开发。最近工作还蛮清闲，找出压箱底很久的响应式开发教程，大概一月前看过一些，然后也忘得差不多la，从头开始学习呗!
这套课程还是很基础的，但越是基础的东西，越不愿意花心思静下心来学习。看完这套响应式开发教程，不仅能够构建响应式开发前端技术树，还帮助自己整理了部分HTML和CSS基础知识，很重要但总记不清楚的知识点。
首先了解一下响应式设计的概念。
响应式网站（Responsive Web Design）是一个设计理念，在响应式网站的设计与开发中应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。
无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境，只设计一个网站就能够兼容多个终端。
响应式网站设计的理念是在2010由 Ethan Marcotte 著作的 《Responsive Web Design》一文中提出，它是多项技术的综合体，主要包括：
优点：
减少工作量，网站、设计、代码、内容都只需要一份，多出来的工作量只是JS脚本和CSS样式的部分改动。
缺点：
了解过响应式网站设计概念，在开始真实项目实践前，需要明确响应式网站设计的几个实践原则。避免我们因为基础不牢靠，导致错误的选型。
渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验，但是它们侧重点不同，所以导致了工作流程上的不同。
渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
在相应式网站开发中题主是推荐优雅降级的原则，毕竟@media属性是css3中的新特新。
与习惯和网站性质有关，没有对错，只有适合。对于支付理财类的项目，用户通常会选择在电脑上操作（有各种安全证书保障），这时可以先针对大屏幕设计。对于娱乐休闲类的项目，用户习惯在手机端操作，这就可以优先考虑小屏幕的设计。
确定支持的浏览器，可根据各浏览器市场占比和公司实际业务情况，选择需要兼容的浏览器。若没有特殊情况，推荐在最新版本的chrome浏览器中进行开发，从chrome浏览器移植到其他浏览器时兼容性还是不错的。
建议不要针对特定设备分割，而是针对屏幕尺寸进行分割。例如，
当然这个断点值的选取要根据设计稿进行调整。
不管设备大小，应该包含相同的内容 VS 根据设备大小不同，显示相同的内容。这就取决于产品经理啦。
帮你彻底弄懂css中单位px、rem、em的区别，以及在响应式开发中不同单位最优的适用场景。
针对不同屏幕大小，编写不同的页面样式，改用合适屏幕大小的排版和布局。
响应式图片不仅仅指图片的排版和布局，还包括根据设备大小加载不同的图片。在移动端设备上访问时，加载与用户设备相匹配的小图片，即快速，又不影响用户体验，也不会因为加载跟移动端不适配的高清大图导致用户流量出走。点击标题链接，将会介绍五种实现响应式图片的方法。
在学习这套响应式开发教程的过程中，还涉及很多HTML和CSS相关的基础知识，整理如下：
display:inline-block元素之间空隙的产生原因和解决办法
浅谈Normalize.css和Reset.css的区别——选择对的默认样式处理脚本
视频课程原地址：所向披靡的响应式开发 一套代码适配多终端，前端工程师必会技能
响应式开发项目代码地址：https://github.com/Hayley2016/responsive-web-design
需要视频课程的同学可以联系微信【H19950211H】免费提供。
与君共勉：再牛逼的梦想，也抵不住傻逼般的坚持！
