啥是像素？有哪些分类？
设备像素（device pixels）设备独立像素CSS像素逻辑像素
设备像素即物理像素（显示器的最小物理单位，由三原色组成）也是常说的屏幕分辨率。
通常逻辑分辨率抽象上是指设备独立像素（独立于设备像素单位）纬度的分辨率。
一个独立设备像素由若干个物理像素组成，操作系统设定的屏幕分辨率（即独立设备像素分辨率）。
CSS像素是浏览器使用的像素单位，通常当网页缩放比例是100%时Css像素和设备独立像素等效，但是当页面进行百分比缩放时，当放大至200%时，一个CSS像素是4个设备独立像素。
总而言之，言而总之
- 设备像素可以对应到硬件参数体系。
- 设备对立像素是操作系统参数体系。
- CSS像素是软件应用参数体系。
- 分辨率是抽象定义，用于描述屏幕图像的精密度。比如设备、逻辑分辨率等。
CSS像素、设备独立像素均是逻辑像素的一种体现，通常会换算的像素比是设备像素和设备独立像素，所以通常称呼的逻辑像素也是设备独立像素，但是称呼不准确，需要信息对齐后再进行具体问题讨论。
常见的复杂像素场景？梳理问题模型并系统化解决
首先，插入一个小问题，window.devicePixelRatio 所代表的像素比是什么呢？
- 网页未进行比例缩放时
window.devicePixelRatio = 设备独立像素 / 设备像素
- 网页进行比例缩放时
window.devicePixelRatio =设备独立像素 / CSS像素 = 设备独立像素 / 设备像素 * 缩放比例
探究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 显示器）小流量
基于以上设备分析，可得出设计稿规范、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 显示器）
基于以上的断点可以解决标准的设备碎片化和跨屏问题。但是具体到每个用户系统下，用户自定义设置会导致像素比不同，例如：
- 操作系统修改设备独立像素导致设备像素比不同
- 操作系统修改缩放比例会导致设备像素比不同
- 网页缩放比例修改会导致设备独立像素和CSS像素比不同
为了保证信息一屏的完整性、交互的便利性，通常还需要设计出通用的内容安全区域。例如:
150%放大留资表单按钮被遮挡
在windows上进行设备像素比换算是 853x385，大概落在普通平板的断点范围 768 ～ 992，保证在该高度下表单内容可以一屏展示。
同时还会存在iphone系列高清适配，例如：
- iPhone5 ：分辨率 320 * 568，物理像素 640 * 1136，@2x（倍率）
- iPhone6：分辨率 375 * 667，物理像素 750 * 1334，@2x
- iPhone6 Plus ：分辨率 414 * 736，物理像素1242 * 2208，@3x
因此需要做，如下适配：
-
高清适配，比如倍图图片、文字等内容元素。
-
屏幕高度的首屏内容适配、弹层内容适配（避免内容撑开需使用滚动条进行更多内容查看）