关于响应式网站做的笔记

响应式网站是一个设计理念，它是多项技术的综合体

流动网格（弹性网格布局）、弹性图片和媒介查询是响应式互联网设计的三大技术成分

优点：

• 解决了设备只见的差异化展示（让不同的设备达到最优的视觉体验）
• 减少工作量
  1、网站、设计、代码、内容都只需要一份
  2、多出来的工作量只是JS脚本、CSS样式做一些改动
• 节省时间
• 每个设备都能得到正确的设计
• 搜索优化

缺点：

• 会加载更多的样式和脚本资源
• 设计比较难精确定位和控制
• 老版本浏览器兼容不好

设计实践原则

- progressive enhancement 渐进增强 （不适用）
- graceful degradation    优雅降级（更好）
  移动优先：
    在设计的初期就要考虑的页面如何在多终端展示

断点的选择：

 0-480（小屏幕）、  481-800（中屏幕）、  801-1400（大屏幕）、 1400+（巨屏幕）

移动web

Pixel 移动开发像素知识

px：css pixels 逻辑像素，浏览器使用的抽象单位
dp,pt:device independent pixels 设备无关像素
dpr:devicePixelRatio 设备像素缩放比
计算公式:
     平面上：1px = (dpr)^2 * dp
     纬度上：1px = dpr * dp
DPI:打印机每英寸可以喷的墨汁点（印刷行业）
PPI：屏幕每英寸的像素数量，即单位英寸内的像素密度
PPI越高，像素数越高，图像越清晰，但可视度越低（小），系统默认设置缩放比越大

Retina（高清屏）: dpr都是大于等于2