目前使用小屏幕设备上网的人数正在以前所未有的速度增长，同时，27英寸和30英寸的大显示器也在快速普及；上网设备之间的尺寸差异与日俱增。
可行方案：基于html5和css3的响应式网页设计；可以使网站兼容多种设备和屏幕。
智能手机很重要（老版的IE不再重要）：智能手机的使用量使用率的上升，以及IE6,7等老版IE的使用率下降；
响应式设计并不总是最佳选择，如果有时间有预算，做一个真正的单独的手机版站点才是首选；

弹性网格布局，弹性图片，媒体和媒体查询整合起来即为响应式网页设计；我认为是针对任何设备对网页内容进行完美布局的一种现实机制。


1.客户是否想支持互联网增长最迅猛的市场？                                                ----适合响应式
2.客户是否想要最简洁，快速，且易于维护的代码？                                       ----适合响应式
3.客户是否理解用户体验可以且本应该根据浏览器不同而不同？                         ----适合响应式
4.客户是否要求设计效果在所有浏览器上表现一致，包括IE8以及更低版本？         ----不适合响应式
5.在网站的当前或预期中，是否有百分之七八十以上的人使用IE8以及耕地版本？   ----不适合响应式

引导用户：网站不必再所有浏览器中表现一致

允许页面显示效果在老旧浏览器中有细微的差别，可以使代码更易维护，更新成本也更低；反之会使网站增加大量的图片，是网站变慢，制作成本变高，更难维护；
老旧浏览器的用户越来越少，现代浏览器的用户越来越多，趋势如此，支持大多数；

理想状态下是，为最小的可视区域设计版式，然后在此基础上渐进增强用户体验。

实现响应式的关键技术是css3；

媒体查询：
@media screen and （max-width：320px） and  （max-height：480px）{/iphone4，4s/}
@media screen and （max-width：320px） and  （max-height：568px）{/iphone5/}
@media screen and （max-width：375px） and  （max-height：667px）{/iphone6/}
@media screen and （max-width：414px） and  （max-height：736px）{/iphone6s/}
@media screen and （min-width：321px） and  （max-width：360px）{//}
@media screen and （min-width：361px） and  （max-width：400px）{//}
@media screen and （min-width：401px） and  （max-height：480px）{//}

width：视口宽度；height：视口高度；device-width：渲染表面的宽度；device-height：渲染表面的高度；orientation：检查设备处于横向还是纵向；aspect-ratio：基于视口的宽高比；device-aspect-ratio：基于设备渲染平面的宽高比；color：每个颜色的位数；color-index：设备的颜色索引表中的颜色数；resolution：用来检测设备或打印机的分辨率；scan：电视机的扫描方式；

css层叠样式，样式表中后面的样式会覆盖前面相同的样式（除非前面的样式具有较高的针对性）；

respond.js是为IE8及更低版本增加媒体查询支持的最快的JavaScript工具；
（sarifi浏览器默认在980像素宽的画布上渲染页面，然后把画布缩小到与视口大小匹配）
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

保证图片尽量精简；
内容优先的原则；

媒体查询只能为我们提供自适应设计效果，不能真正实现响应式设计；媒体查询是必须的，灵动显示的流式布局同意必需；创建基本的流动布局，保证页面在媒体查询断点之间的显示效果平滑顺畅。

固定布局经不起未来考验，百分比布局卷土重来；

必记公式：
        目标元素宽度  /  上下文元素宽度 = 百分比宽度

黄金分割率： 
        1:1.61803398874989

em代替px；相对上下文字体大小；现代浏览器默认字体大小为16px；font-size:16px;font-size:100%;font-size:1em;

弹性图片: max-width:100%; ---->图片资源大小问题，超大，带宽限制； -----》为不同的屏幕尺寸提供不同的图片；---》服务端编程提供自适应图片（adaptive-images.com）
width：28%；max-width：200px；限制最大宽度；

css网格系统：快速搭建界面布局。960.gs、columnal

<b>样式钩子，纯粹为了吸引人的注意，除此之外不传递任何重要性，也不暗示其他语态和语气，（以前都是用来给文本加粗的）
<em>强调内容中 的重点；（以前都是用来为文本添加样式的）
<i>一小段有不同语态或语气的文字


遵循WAI-ARIA实现无障碍站点

视频自适应大小：jquery插件 fitvidsjs.com

在可预见的未来，我们需要以基本内容，分层特性，和渐进增强为基准来设计和制作网站，考虑带宽差异，代码应该尽可能保持简洁和灵活。