响应式Web设计：HTML5和CSS3实战（读书笔记）

视口：浏览器窗口内的内容区域，不包含工具栏，标签栏。网页实际显示.
屏幕尺寸：设备物理显示区域

各种宽度和高度

      a、可视区的真实宽度和高度
          document.documentElement.clientWidth 
          document.documentElement.clientHeight

          都去掉滚动条的大小（一般是17像素），比如我的dell笔记本在chrome下，
          正常的可视区（即无滚动条）大小是1366*663，假如水平和垂直方向都有滚动条的话，这两个值
          的大小为 1349 * 646
      b、
         document.documentElement.offsetWidth   无滚动条 1366  有滚动条 1349 同a
         document.documentElement.offsetHeight  根据实际的html元素被撑开的大小

      c、
         window.innerWidth / window.innerHeight 
           （1）有滚动条 document.documentElement.clientWidth + 滚动条宽度
           （2）无滚动条 等于document.documentElement.clientWidth
                高度计算规则同宽度

响应式方法论

• 先针对小视口设计
• 然后逐步对大视口渐进增强
• 响应式设计中内容始终优先
• 流动布局、弹性图片和媒体查询：使用百分比布局创建流动的弹性界面，同时使用媒体查询来限制元素的变动范围。（平滑过渡）

HTML5的时代

• 简化标签
• 语义化标签
• CSS3(圆角，渐变…..)

-webkit-,-moz-是各厂商发布正式版本之前，实验各自对css3新特性的实现

业务需求和预算的考虑

• 客户是否想支持互联网用户增长最迅猛的市场？如果想，那响应式方法就很适合。
• 客户是否想要最简洁、快速，且易于维护的代码？如果想，那响应式方法就很适合。
• 客户能否理解用户体验可以且本应该根据浏览器不同而不同？如果可以理解，那响应式方法就很适合。
• 客户是否要求设计效果在所有浏览器中都保持一致，包括IE 8 以及更低版本？如果是，响应式设计就不适合。
• 该网站的当前或预期客户中，是否有百分之七十以上的人可能使用Internet Explorer 8或者更低版本？如果是，则响应式设计不适合。
• 在预算允许的情况下，一个完全定制的“移动”版网站比响应式设计更适合。

网站不必在所有浏览器中表现一致

客户->思维定式->说服引导（理由如下）

• 允许页面显示效果在老旧浏览器中有细微的差别，这样可以使代码更易维护，将来更新的成本也更低。
• 让页面元素在那些老旧浏览器（如Internet Explorer 8 及更低版本）中表现一致会导致网站增加大量的图片。这会使网站变慢，制作成本变高，而且更难维护。
• 现代浏览器可以理解的简洁代码等同于更快速的网站。快速响应的网站在搜索引擎中的评级高于慢腾腾的网站。
• 使用老旧浏览器的用户越来越少，使用现代浏览器的用户越来越多——我们应该支持大多数！

媒体查询

W3C规范审核：工作草案（Working Draft）->候选推荐标准（Candidate Recommendation）->提议推荐标准(Proposed
Recommendation)->几年时间等待->W3C 推荐标准（REC)
- CSS3 是由很多附加模块组合而成的。媒体查询就是其中的一个模块。
- 媒体查询可以让我们根据设备显示器的特性为其设定CSS 样式。

媒体查询语法

CSS 样式表中使用媒体查询

在屏幕宽度小于等于400 像素的设备上，h1 元素的文字颜色就会变成绿色。
@media screen and (max-device-width: 400px) {
h1 { color: green }
}
给视口最大宽度为360 像素的显示屏设备加载一个名为phone.css 的样式表。
@import url("phone.css") screen and (max-width:360px);

使用CSS 的@import 方式会增加HTTP 请求（这会影响加载速度）

通过标签的media 属性为样式表指定设备类型（如显示屏或打印机）。

非纵向放置的显示屏设备
<link rel="stylesheet" media="not screen and (orientation: portrait)" href="portraitscreen.
css" />
媒体查询列表：查询列表中的任意一个查询为真，则加载文件。
全部查询都不为真，则不加载。
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:
800px), projection" href="800wide-portrait-screen.css" />

媒体主要特性

• width：视口宽度。
• height：视口高度。
• device-width：渲染表面的宽度（对我们来说，就是设备屏幕的宽度）。
• device-height：渲染表面的高度（对我们来说，就是设备屏幕的高度）。
• orientation：检查设备处于横向还是纵向。
• aspect-ratio：基于视口宽度和高度的宽高比。一个16∶9 比例的显示屏可以这样定义aspect-ratio: 16/9。
• device-aspect-ratio：和aspect-ratio 类似，基于设备渲染平面宽度和高度的宽高比。
• color：每种颜色的位数。例如min-color: 16 会检测设备是否拥有16 位颜色。
• color-index：设备的颜色索引表中的颜色数。值必须是非负整数。
• monochrome：检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数，如monochrome: 2。
• resolution：用来检测屏幕或打印机的分辨率，如min-resolution: 300dpi。还可以接受每厘米像素点数的度量值，如min-resolution: 118dpcm。
• scan：电视机的扫描方式，值可设为progressive（逐行扫描）或interlace（隔行扫描）。如720p HD 电视（720p 的p 即表明是逐行扫描）匹配scan: progressive，而1080i HD 电视（1080i 中的i 表明是隔行扫描）匹配scan: interlace。
• grid：用来检测输出设备是网格设备还是位图设备。
• 除scan 和grid 之外，都可使用min 和max 前缀来创建一个查询范围。

建议：

• Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
• CSS重置样式：normalize.css

保证图片尽可能精简（base64）

时刻谨记，我们要保证代码和数据都尽可能精简，以便为带宽有限的用户提供愉悦的体验。

阻止移动浏览器自动调整页面大小

• iOS 和Android 浏览器都基于核心

最常用写法
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

width:可视区域的宽度，值可为数字或关键词device-width
 height:同width
 intial-scale:页面首次被显示是可视区域的缩放级