前言
- 移动端开发经常遇到一些概念:物理像素、逻辑像素、像素密度、像素比等,本节来详细介绍下
- 关键词:
- 屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等。
屏幕尺寸
- 华为荣耀7
- 图上写的是5英寸。那么这个5英寸到底是怎么算出来的呢?
- 先进行一下单位的换算1英寸(inch)=2.54厘米(cm)
- 屏幕尺寸指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米
- 比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等
- 如何计算手机尺寸?
知道手机屏幕的长和宽,然后利用勾股定理,就可以算出斜边的长了。还有个更简单的方法,只要用尺子量一下它的对角线是多少厘米,然后再换算成英寸就搞定了。
- 设备尺寸是指设备对角线的长度,单位为英寸(inch),简称“寸”。
物理像素–UI设计师像素
- 物理像素/屏幕分辨率/物理分辨率:
- 屏幕分辨率是屏幕像素的数量,一般用屏幕宽度的像素点乘以屏幕高度的像素点,指的是设备屏幕实际拥有的像素点。
- 单位:px,即1px=1个像素点
- 比如iPhone 6的屏幕在宽度方向有750个像素点,高度方向有1334个像素点,所以iPhone 6 总共有750px*1334px个物理像素
- 注意:屏幕分辨率即物理像素是固定的,这是厂商在出厂时就设置好的,也就是说一个设备的分辨率是固定的
- 设备像素一般采用 水平分辨率 和 垂直分辨率 组成。
- 例如:iPhone 6 的设备像素为 750 * 1334。
- “设备像素”的特点:
出厂就设置好
是设备的固有属性
不会发生变化。 - 苹果系列商品的参数
- 重点:
- UI----物理像素
- 前端—逻辑像素
逻辑像素/设备独立像素DIP—WEB
- 逻辑像素/设备独立像素
- 也叫“设备独立像素”(Device Independent Pixel, DIP),可以理解为反映在CSS/JS代码里的像素点数。
- 这个是计算机坐标系统里的虚拟慨念,这个点代表一个可以由程序使用的虚拟像素(比如: css像素-----逻辑像素)
- 设备独立像素:Device Independent