响应式网页设计 Responsive Web design
形形色色的设备类型
- PC设备:办公桌面、专业绘图桌面等； 横屏
- 移动设备:手机、平板等； 竖屏、横屏、刘海屏
- 超大设备：如投影仪、巨屏等；定制纵横比
- 超小设备：如智能手表等；异形屏，如圆形
形形色色的尺寸
- 屏幕(screen)：显示器的物理尺寸，不可调节
- 浏览器窗口(window)：浏览器作为一个window应用所使用的窗口尺寸。这个尺寸是可以被用户调整的(resize)
- 浏览器客户区(client area)或可视区：指除去了浏览器窗口标题栏、菜单栏、状态栏等区域外，实际可用于显示文档的窗口大小。
- 文档(document)：指网页文档经过浏览器定位和尺寸计算后，占有的空间大小
由上：渲染后的文档实际尺寸和可见尺寸不一定是一致，因此会出现纵向或横向滚动条 假如所有的尺寸都是静态和不可调节的，最开心的，一定是程序员
当用户缩放窗口
浏览器窗口一般为最大化,即占据屏幕的全部
- 但用户可改变窗口（可视区）的尺寸,从而出现水平、垂直滚动条。
- 在移动设备中,水平滚动条的用户体验尤其不好
解决方式
- 文档的宽度应尽量设置成相对单位
- 文本内容等应尽量使用流体布局，即由浏览器进行自动换行或分配空间
- 如果某些内容不允许随窗口resize而变化，则可以通过设置min-width、max-width之类属性进行约束
当用户缩放内容
用户通过鼠标滚轮+ctrl键，可以对内容文本进行缩放
- 放大内容：相当于放大了文档的尺寸，而可视区尺寸不变，可能会导致出现滚动条
- 缩小内容：相当于缩小了文档的尺寸，而可视区尺寸不变，可能会导致滚动条消失
变化的像素比
物理像素(发光点)、逻辑像素(操作系统确定的最小像素单位)、css像素三者之比通常是1:1:1，但是：
- 对内容进行缩放，相当于对css像素进行缩放，放大意味着多个逻辑像素显示一个css像素
- 用户可以通过操作系统设置系统像素（如从1280x1024 => 1024x768）
- 相当于从原来一个物理像素显示一个逻辑像素,变为多个物理像素显示一个逻辑像素，类似于文档内容被放大的效果
- 某些设备厂商(如apple公司的Retina视网膜屏), 内置即使用多个物理像素来显示一个逻辑像素,故其特点是文字内容尤其是图片的显示更为锐利平滑(更少锯齿感)
DPR devicePixelRatio 设备像素比 = 物理像素（即发光点）/逻辑像素（px) ,也称之为屏幕密度
放大：使用插值算法来填充扩张的像素；反之，则压缩。图片缩放的原理也类似
响应式设计
响应式网页设计是伴随移动设备平台兴起而出现的技术，主要解决同一个Web页面在不同设备和环境中均能获得一致性用户体验的问题
- 支持各种设备类型
- 支持各种尺寸与分辨率的
- 支持各种变化的环境与行为
静态的CSS代码如何动态适应运行时的变化