啥是像素？有哪些分类？
设备像素（device pixels）
设备独立像素
CSS像素
逻辑像素
设备像素即物理像素（显示器的最小物理单位，由三原色组成）也是常说的显示分辨率的像素单位。
设备独立像素（独立于设备像素单位）通常是操作系统设定的屏幕分辨率的抽象单位，一个设备独立像素由若干个物理像素组成。
CSS像素是浏览器使用的像素单位，通常当网页缩放比例是100%时CSS像素和设备独立像素相等的，但是当页面进行百分比缩放时，当放大至200%时，一个CSS像素单位是四倍设备像素点组成。
总而言之，言而总之
- 设备像素可以对应到硬件参数体系。
- 设备对立像素是操作系统参数体系。
- CSS像素是软件应用参数体系。
- 分辨率是抽象定义，用于描述屏幕图像的精密度。比如设备、逻辑分辨率等。
CSS像素、设备独立像素均是逻辑像素的一种体现，通常会换算的像素比是设备像素和设备独立像素，所以通常称呼的逻辑像素也是设备独立像素，但是称呼不准确，需要信息对齐后再进行具体问题讨论。
常见的复杂像素场景？梳理问题模型并系统化解决
首先，插入一个小问题，window.devicePixelRatio 所代表的像素比是什么呢？
是 window.devicePixelRatio = 设备像素 / CSS像素，也是：
- 网页未进行比例缩放时
window.devicePixelRatio = 设备像素 / 设备独立像素 =
- 网页进行比例缩放时
window.devicePixelRatio = 设备像素 / 设备独立像素 * 缩放比例
探究Mac pro中的设备像素、设备独立像素、CSS像素:
- 1440 * 900 （基于设备独立像素的分辨率）系统设置 -> 显示器
- 2560 × 1600 (基于设备像素的分辨率) 关于本机 -> 显示器
- 某个网页基于CSS像素的分辨率（1440 * 1472 ），则换算像素比 window.devicePixelRatio = 2
- 某个网页放大200%的CSS像素分辨率（ 720 * 736 ），则换算像素比 window.devicePixelRatio = 4
一个页面在UI、产品、业务进行用户层面考量时即统一也分散，在深入到具体响应式设计方案时通常要做分辨率分析、流量特征分析、用户分析。
分辨率分析
-
360 - 480(竖版手机)
-
>= 480 && < 768 (横版手机、小平板) 小流量
-
>= 768 && < 992（普通平板）
-
= 992 && < 1280（大平板、小显示器、笔记本）
-
= 1280 && < 1440（普通显示器、普通笔记本）
-
= 1440 && < 1920（主流显示器）
-
> 1920（2k、4k 显示器）小流量
流量特征分析
-
>= 480 && < 768 (横版手机、小平板) 小流量
-
> 1920（2k、4k 显示器）小流量
基于以上分析，可确定设计稿规范、CSS断点方案，如下：
UI设计输出主要规范稿，360设计稿 、480设计稿 、992设计稿 、1280设计稿、1440设计稿 。
特殊，流量小的出兼容稿，768设计稿、1920设计稿。
CSS响应断点技术方案：
- xs-new (0 - 479) (竖版手机)
- min-pad (480 - 767) (横版手机、小平板)
- sm-new (480 - 991)
- pad (768 - 991) （普通平板）
- min-laptop (992 - 1279)（大平板、小显示器、笔记本）
- laptop (1280 - ~) (普通显示器、普通笔记本）
- lg (1440 - ~) (主流显示器）
- xl (1920 - ~) (2k、4k 显示器）
用户分析
基于分辨率、流量可以解决设备碎片化和跨屏问题，作出标准化解决方案。但是具体到每个用户实际使用设备或者用户自定义设置，会出现大量特例问题。
1. 例如用户设备iphone系列高清适配问题：
- iPhone5 ：分辨率 320 * 568，物理像素 640 * 1136，@2x（倍率）
- iPhone6：分辨率 375 * 667，物理像素 750 * 1334，@2x
- iPhone6 Plus ：分辨率 414 * 736，物理像素1242 * 2208，@3x
因此需要做，高清适配，比如倍图图片、文字等内容元素。
2. 例如用户自定义设置：
- 操作系统修改设备独立像素导致设备像素比不同
- 操作系统修改缩放比例会导致设备像素比不同
- 网页缩放比例修改会导致设备独立像素和CSS像素比不同
为了保证信息一屏的完整性、交互的便利性，通常还需要设计出通用的内容安全区域。例如:
电脑屏幕偏好设置150%放大，导致留资表单按钮被遮挡
在1920x1080的windows设备中，网页全屏1280x492，进行设备像素比换算是 853x385，大概落在普通平板的断点范围 768 ～ 992，如果需要在该高度下表单内容可以一屏展示，那么这类问题是未表单设计都新增768～992的兼容稿。 类似的首屏内容适配、弹层内容适配也是。
