响应式Web设计实践读后感10篇
《响应式Web设计实践》是一本由[美] Tim Kadlec著作，人民邮电出版社出版的平装图书，本书定价：55.00元，页数：256，特精心从网络上整理的一些读者的读后感，希望对大家能有帮助。
《响应式Web设计实践》读后感(一)：《响应式Web设计实践》：前端+后台=响应式
本书内容非常丰富，下面介绍一些对我有所帮助的章节：
3.4 媒介查询顺序
---
我之前的制作经验是“优雅降级”型的，先制作一个完整的站点，在Chrome、IE中都能完整查看了，然后再往下增加一些断点，比如640px、320px等，在这些断点中新增样式来覆盖之前的完整样式，或者隐藏一些元素，但这样的缺点是不支持媒体查询的手机浏览器就只能读取完整站点样式了。而且因为做了restyle，整体代码量会偏大。
所以本书的经验“渐进增强”，先制作一个核心站点样式，这个样式中没有负责布局的样式，没有左右栏，就是简单的核心样式。然后在媒体查询中往上增加一些断点，比如320px、640px等，在这些断点中新增样式来增加布局样式，这样就免掉了之前的缺点。
最后桌面端的IE678不认识media query，所以需要用IE条件注释加载一个单独的样式：
lt;!--[if (lt IE 9) & (!IEMobile)]>
lt;link rel="stylesheet" type="text/css" href="/css/ie.css" />
lt;![endif]-->
3.6 确定断点
---
这一节的观点是，新增的断点不应该由主流设备宽度来决定，应该由内容来决定，也就是说新增一个480的站点不应该是因为手机屏幕宽度很多都是480px，而应该是在481px的时候就能够有所调整了。
这个观点很好，让我们从被动地设置断点，到拥有主动权。
102 响应式设计对性能的影响
---
Guy介绍了一下“前端的响应式设计”的弊端，大多数简单的前端处理的响应式有以下弊端：
1. 下载并隐藏
2. 下载并缩小
3. 额外的DOM
但是这样也是有原因的，因为首页图经常需要运营来修改，设计师也没有资源出一系列大图的时候，再专门针对手机做一系列小图，所以当时的方案是简单缩小。
当然以后有机会一定会去优化，做出更好的体验。
4.5 背景图片
---
利用媒体查询，在屏幕大于一定宽度的浏览器中才加载自定义字体。
4.7.2 广告
---
广告真的是一个很大的阻力，空间改版的时候想修改边栏宽度，就遇到广告位的阻力……也许以后可以跟商户签订更灵活的协议。
7.5.1 代码汤
---
不知道原文是什么，这里翻译成代码汤，有点奇怪，但意思大概是懂了，就是页面上的富文本CMS生成了很多冗余标签，冗余标签储存在数据库中，然后在移动端生成内容的时候就有诸多困难。
解决办法是简化CMS，同时在编辑器中做一个简单内容拷贝，或者过滤器过滤标签。
8.2.2 服务器端Modernizr
---
浏览器段的Modernizr我们都了解，是通过在浏览器里运行Javaｓｃｒｉｐｔ来判断浏览器的能力，然后在html标签上附加一些标记class。
服务器端Modernizr的原理有所不同，访问者第一次访问页面时（不带cookie），Javaｓｃｒｉｐｔ会立刻执行并取得测试的结果，然后这些结果被添加到cookie，页面立刻刷新。当下一次加载页面时，服务器端会读取cookie值，然后直接输出html。
缺点是Javaｓｃｒｉｐｔ可能禁用，或者浏览器压根就不支持Javaｓｃｒｉｐｔ，而且要加载两次（虽然第一次数据量很少，也是一次请求）。
优点是不必依赖UA字符串，更稳定。
9.2 网络
---
测试网络的方法之一是发起某个图片的请求，然后测试下载时间，根据这个来考虑是否需要加载更高分辨率的图片，
方法之2是网速API，但其实并不太稳定，一方面不是所有设备都有这个API，另一方面不一定3G就更快。
最后
---
响应式不简单是前端的责任（media query），也不简单是后台的责任（单独的m.站点），而是二者统一，后端来输出不同的内容，前台来按需加载图片，来做断点。
设计师也需要了解前端知识，因为未来的主流趋势是设计师在浏览器中设计。
本书有一些小问题，比如：
38边栏的链接中有空格，其实url中不能有空格的吧。
第8章原章节名字可能确实是RESS，但中文书里这样写太奇怪了，这并不算约定通俗的缩写，让人云里雾里，简单的“服务器端检测”就非常好了。
另外不喜欢（译注：）这样的文字插入到正文中，应该用脚注或者边栏注可能更好。
整体来说翻译的不赖，译者的自我评价（原文5星，翻译3星）过谦了，我打5星。
《响应式Web设计实践》读后感(二)：笔记罢了
1.渐进增强 insteadof 优雅降级 —— mobile first
2.相应的限制 —— 定宽元素
3.自适应布局
(1).display:table-cell
(2).flexbox（亦可用作水平垂直居中）
(3).css3多列
4.media query 内容引导断点 not 设备引导断点
5.响应式加载媒体（或使用SVG），display:none并不能节省性能
6.Adobe Shadow —— 远程调试测试移动设备
7.matchMedia —— media query for js
8.解决方案 RESS —— 客户端响应式布局+服务器用户代理检测
《响应式Web设计实践》读后感(三)：给想要学设计的工程师
去年年中一次很偶然的机会，在微博里看到人民邮电出版社在寻人翻译这本《Implementing Responsive Design》。由于之前在百度实习时为项目组里做过相关的演讲，而且对RWD（Responsive Web Design）也很有兴趣，于是便有了自己翻译的第一本书——《响应式Web设计实践》。
在我看来，似乎很难将RWD归到现有的特定职位的工作范围中去，因为它里面即有设计又有开发，这倒是正好中了想要学设计的前端工程师（例如我）或者想要学开发的设计师们的下怀。我想响应式Web设计的出现，不仅会影响到Web应用的站点模式（不同平台不同站点vs不同平台相同站点）以及项目流程，更重要的是它将给那些双面手们更大的舞台。
在Startups, this is how design works[1]网站中，这些双面手们被称之为独角兽（Unicorn）。我们暂且不在这里讨论专业设计师与专业前端工程师的搭配与“独角兽”小组孰优孰劣，作为前端工程师学一些设计的东西至少能在实施RWD的过程中有很大的帮助。下面是我作为一名计算机研究生学习设计的一些经验，希望能对各位志同道合的前端工程师有所帮助。
首先，要认识到你不是一个人在战斗。一开始，我曾以为有这种跨界想法的人不多，但后来发现其实非常多，尤其是国外的一些独立开发者或设计师。甚至有网站为这些人起了新的名字——Design Technologist[2]。
其次，最好能订阅一些知名的设计网站或博客，比如dribbble[3]（如果招程序员要看github的话，那招设计师就要看他的dribbble了）。要想能设计出优秀的设计，就要先多看优秀的设计，从而提高自身的审美水平。此外，网上还有大量专门针对程序员的设计教程（例如hackdesign[4]）。当然，购买一些设计类书籍（例如《设计心理学》，你也可以参考我的设计类图书豆列[5]）进行学习也是很有必要的。
然后，就要动手画了。一开始你可以不去计较工具，随处可见的铅笔+A4纸就是很好的起点。如果你能负担得起樱花针管笔和Moleskin的本子当然更好，因为更好的工具确实能给你营造更好的气氛甚至给你带来更多的灵感。到后来你还可以购买一些诸如数位板这样的高级工具辅助创作。此外，如果你不知道设计师们是如何进行创作的话，那就要主动去跟他们接触——去找同公司的设计师交流，或者参与线下的设计师分享会（iconfans[6]就经常举办这样的分享活动）都是非常好的途径。
最后，要从手中的项目开始。如果是公司的项目，那你可以主动参加有关设计的讨论；如果是你自己的项目那就更方便了。经过一次次的修改之后，你会发现自己的设计水平也会一次比一次更好。罗马不是一天建成的，独角兽也是，所以要有耐心。
虽然我们还远不是独角兽，但至少我们在磨砺自己的角。
：由于还是学生，因此翻译功力还很稚嫩，本书中翻译得不妥之处还请大家多多包涵。书的内容值得给5星，但给自己的翻译3星，所以打了4颗星。最后附上一些自己总结的RWD相关资源，希望能对诸位读者朋友有所帮助：
参考资源：