响应式网页设计学习笔记
一、why
随着移动技术的迅速普及，越来越多的人通过不同设备来浏览网页，为了便于不同设备的用户访问，网页经常需要针对不同设备进行不同的设计，不但费时费力，而且不同界面容易造成用户体验的不一致。响应式web设计正是由此而生。图1-4可以充分说明响应式网页设计的必要性。
图1.当前流行的网页浏览设备
图2.网页运行于不同的操作系统
图3.当前主流的屏幕尺寸对比
图4.当前主流浏览器市场占有量对比
二、what
what isResponsive Web Design？啥是响应式网页设计(又译为自适应网页设计)，指的是可以自动识别屏幕宽度、并做出相应调整的网页设计，简单来说就是同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout） 。
图5.响应式网页设计效果图
可以看看35 Free and Responsive Website Templates，体会体会响应式网页设计的内涵和特征。
1.优点
视觉体验统一，见图6.
兼容不同设备，见图7.
节约成本，见图8.
图6.不同设备相同的视觉体验
图7.兼容当前及未来新设备
图8.节约成本
2.缺点
缺点主要有难以兼容低版本浏览器，移动宽带流量。
3.图解Responsive web design
三、how
1.一切弹性化
我们通过响应式的设计和开发思路让页面更加"弹性"了。图片的尺寸可以被自动调整，页面液态图片技术 液态图片技术布局再不会被破坏。虽然永远没有最完美的解决方案，但它给了我们更多选择。无论用户切换设备的屏幕定向方式，还是从台式机屏幕转到iPad上浏览，页面都会真正的富有弹性。通过液态网格和液态图片技术，并且在正确的地方使用了正确的HTML标记。
2.响应式图片
响应式图片技术思想：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。
看看用3个步骤实现响应式Web设计。
参考文献
1.响应式web设计浅析，收集自网络。
2.响应式网页设计，百度文库
3.响应式web设计专题，51CTO