你真懂前端中像素和设备适配吗?

·  阅读 1021

啥是像素?有哪些分类?

设备像素(device pixels)

设备独立像素

CSS像素

逻辑像素

设备像素即物理像素(显示器的最小物理单位,由三原色组成)也是常说的显示分辨率的像素单位。

设备独立像素(独立于设备像素单位)通常是操作系统设定的屏幕分辨率的抽象单位,一个设备独立像素由若干个物理像素组成。

CSS像素是浏览器使用的像素单位,通常当网页缩放比例是100%时CSS像素和设备独立像素相等的,但是当页面进行百分比缩放时,当放大至200%时,一个CSS像素单位是四倍设备像素点组成。

总而言之,言而总之

  • 设备像素可以对应到硬件参数体系。
  • 设备对立像素是操作系统参数体系。
  • CSS像素是软件应用参数体系。
  • 分辨率是抽象定义,用于描述屏幕图像的精密度。比如设备、逻辑分辨率等。

CSS像素、设备独立像素均是逻辑像素的一种体现,通常会换算的像素比是设备像素和设备独立像素,所以通常称呼的逻辑像素也是设备独立像素,但是称呼不准确,需要信息对齐后再进行具体问题讨论。

常见的复杂像素场景?梳理问题模型并系统化解决

首先,插入一个小问题,window.devicePixelRatio 所代表的像素比是什么呢?

是 window.devicePixelRatio = 设备像素 / CSS像素,也是:

  • 网页未进行比例缩放时

window.devicePixelRatio =   设备像素 / 设备独立像素 =

  • 网页进行比例缩放时

window.devicePixelRatio =   设备像素 / 设备独立像素 * 缩放比例

13-inch MacBook Pro - Space Gray - Apple

探究Mac pro中的设备像素、设备独立像素、CSS像素:

  1. 1440 * 900 (基于设备独立像素的分辨率)系统设置 -> 显示器
  2. 2560 × 1600 (基于设备像素的分辨率) 关于本机 -> 显示器
  3. 某个网页基于CSS像素的分辨率(1440 * 1472 ),则换算像素比 window.devicePixelRatio = 2
  4. 某个网页放大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像素比不同

为了保证信息一屏的完整性、交互的便利性,通常还需要设计出通用的内容安全区域。例如:

设计“友好的注册流程”,需注意5件小事| 人人都是产品经理

电脑屏幕偏好设置150%放大,导致留资表单按钮被遮挡  

在1920x1080的windows设备中,网页全屏1280x492,进行设备像素比换算是 853x385,大概落在普通平板的断点范围 768 ~ 992,如果需要在该高度下表单内容可以一屏展示,那么这类问题是未表单设计都新增768~992的兼容稿。  类似的首屏内容适配、弹层内容适配也是。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改