移动Web开发入门

Frank
  • 移动开发
  • 移动Web
大约 6 分钟约 1797 字...

移动 Web 开发基础知识

基本概念

分辨率

分类

  • 设备分辨率:适用于电子屏幕,设备分辨率反映了硬件设备处理图像时的效果是否细腻(别名:显示器分辨率屏幕分辨率物理分辨率

提示

显示器分辨率(屏幕分辨率)是指显示器能显示的像素有多少。 由于屏幕上的点、线和面都是由像素组成的,显示器可显示的像素越多,画面就越精细,同样的屏幕区域内能显示的信息也越多。

  • 显示分辨率一定的情况下,显示屏越小图像越清晰
  • 显示屏大小固定时,显示分辨率越高图像越清晰
  • 图像分辨率:适用于图像/设计稿,图像分辨率指标的高低反映了图像清晰程度

在 PC 端非 retina 屏上,设备分辨率等于图像分辨率

分辨率=画面水平方向的像素值 * 画面垂直方向的像素值

例如,一个屏幕分辨率是 1024×768 =786432 ,也就是说:水平方向上有 1024 个物理像素,垂直方向上有 768 个物理像素

单位

分辨率的单位用 屏幕像素密度 来表示(屏幕像素密度,即每英寸屏幕所拥有的像素数,即在一个对角线长度为 1 英寸的正方形内所拥有的像素数)

PPI: Pixels Per Inch(像素每英寸) 适用于图像分辨率

DPI: Dots Per Inch(点每英寸)适用于设备分辨率

PPI/DPI 越大,画面就越细腻。当用于描述显示器设备时 PPI 与 DPI 是同一个概念

PPI/DPI的计算

PPI计算公式

相同的分辨率,更高的 PPI 表现为物理尺寸更小; 物理尺寸相同,较低的 PPI 表现为较低的分辨率

像素

逻辑像素-PX(CSS pixels)也叫:设备独立像素、CSS像素:

浏览器内的一切长度都是以 CSS 像素为单位的,CSS 像素的单位是 px,px 是一个相对单位,相对的是设备物理像素(device pixel),其相对性体现在在同一个设备上或在不同设备之间每 1 个 px 所代表的物理像素是可以变化的

CSS 像素的单位是PX(CSS pixels), 在浏览器中可以通过 screen.width ,screen.height 获取浏览器的逻辑像素

在一般 PC 屏幕上, CSS 的 1px = PC 屏幕的 1 个物理像素

retina 屏幕上, CSS 的 1px = PC 屏幕的 4 个物理像素

iphone3 的分辨率是 320*480。 但是从 iphone4 开始,苹果公司推出了的 retina 屏,分辨率提高了一倍,变成 640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍

安卓设备上的一个 css 像素相当于多少个屏幕物理像素,也因设备的不同而不同

用户缩放浏览器也会引起 css 中 px 的变化

当用户把页面放大一倍,那么 css 中 1px 所代表的物理像素也会增加一倍;

把页面缩小一倍,css 中 1px 所代表的物理像素也会减少一倍

假设我们用 PC 浏览器打开一个页面,浏览器此时的宽度为 800px,页面上同时有一个 400px 宽的块级元素容器。很明显此时块状容器应该占页面的一半。但如果我们把页面放大,放大为 200%,也就是原来的两倍。此时块状容器则横向占满了整个浏览器。但此时我们既没有调整浏览器窗口大小,也没有改变块状元素的 css 宽度,但是它看上去却变大了一倍——这是因为我们把 CSS 像素放大为了原来的两倍.也就是说默认情况下一个 CSS 像素应该是等于一个物理像素的宽度的,但是浏览器的放大操作让一个 CSS 像素等于了两个设备像素宽度。 从上面的例子可以看出,CSS 像素从来都只是一个相对值

物理像素-DP(device pixels),也叫设备像素、设备物理像素:

pt 和 px 的关系

pt 和 px 的关系就是—— 1pt 里面有几个像素点。(比如 1pt 里面有 1 个 px,也可以有 2 个,3 个)

设备像素(物理像素),顾名思义,显示屏是由一个个物理像素点组成的,通过控制每个像素点的颜色,使屏幕显示出不同的图像,屏幕从工厂出来那天起,它上面的物理像素点就固定不变了,单位 pt。

设备屏幕实际拥有的像素点,屏幕的基本单元,是有实体的。

比如 iPhone 6 的屏幕在宽度方向有 750 个物理像素点,高度方向有 1334 个物理像素点,所以 iPhone 6 总共有 750*1334 个物理像素点。

所谓的一倍屏、二倍屏(Retina)、三倍屏,指的是设备以多少物理像素来显示一个 CSS 像素,也就是说,多倍屏以更多更精细的物理像素点来显示一个 CSS 像素点,在普通屏幕下 1 个 CSS 像素对应 1 个物理像素。在 Retina 屏幕下,1 个 CSS 像素对应 4 个物理像素。

dpr

可以发现,在同样的大小下,2dpr 的屏幕时普通屏幕像素点的 4 倍,3dpr 的屏幕时普通屏幕像素点的 9 倍。这就是 retina 屏幕

设备像素比-DPR(device pixels ratio):

设备像素比(dpr 描述的是未缩放状态下,一个方向上物理像素和 CSS 像素的比值)

设备像素比(dpr)是指开发中 1 个 css 像素占用多少设备像素,如 2 代表 1 个 css 像素用 2x2 个设备像素来绘制。

其实在很久以前,CSS 的 1px,屏幕就渲染成 1 个实际的物理像素点,即 DPR=1。

但从 iPhone4 开始, 苹果公司为其产品 mac、iPhone 以及 iPad 的屏幕配置了 Retina 高清屏,在 Retina 屏上,,DPR=2

那 CSS 的 1px 到底等于几个物理像素呢?

把页面放大一倍,那么 CSS 中 1px 所代表的物理像素也会增加一倍; 把页面缩小一倍,CSS 中 1px 所代表的物理像素也会减少一倍。

在某些浏览器中,window.devicePixelRatio 可以获得此比例,即 devicePixelRatio = 设备物理像素 / 逻辑像素。

但是要注意的是,window.devicePixelRatio 在不同的浏览器中还存在些许的兼容性问题

上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1