像素和物理像素"/>
CSS像素和物理像素
1. CSS像素
什么是CSS像素?
CSS像素又称为逻辑像素,虚拟像素,也称为直觉像素。CSS像素所使用的单位是px。是一个相对单位。
为什么会有CSS像素产生呢?
屏幕显示是由一个一个不连续的点组成,最小组成单位为物理像素。而在现实生活中,人肉眼看到的是一系列连续的图形,因此采用CSS像素来进行衡量。
而CSS像素是如何计算的呢?
CSS像素是个相对单位,1px等于几个物理像素。
但是仍然存在一定的问题
-
相同尺寸设备,不同屏幕密度
假设按照1px = 2pt进行显示,有一个盒子大小为6px/3px,此时由于第一张图的密度小,显示的大小比第二张图大,显然效果不佳。
-
不同尺寸,相同的屏幕密度,当多个相同盒子占用相同的物理像素,采用浮动布局在一行显示的时候,但是由于设备尺寸不一,设备小的会将盒子挤入下一排进行显示。
而以上问题产生,主要需要解决如何在不同屏幕上保持一致的浏览体验。
解决方式:
-
屏幕密度比
将高密度屏幕的多个设备像素当作1个像素使用
-
自适应
由于各大厂商的分辨率多种多样,为了统一体验效果,使用rem/vw/vh等自适应单位。
2. 物理像素
也成为“设备像素”,屏幕的物理像素在每个设备出厂时已经被固定好,任何设备的物理像素都是固定不变的。
物理像素的单位是pt,是一个绝对单位。
且物理像素一般指的是设备的分辨率,也即
1pt = 1/72英寸
查看IPhone6的参数
屏幕尺寸 像素分辨率 物理尺寸 屏幕密度 4.7英寸 750*1334 px 5.44*2.64英寸 326PPI -
像素分辨率表示,iphone6的4.7英寸屏幕上,在水平方向的width上有750个物理像素点,在垂直方向height有1334个物理像素点
-
屏幕尺寸指的是屏幕对角线的长度,单位为inch(英寸),是一个长度单位,且
1 inch = 2.54cm
屏幕尺寸的计算方式 = 屏幕尺寸(屏幕对角线的长度)= 屏幕斜边的像素 / 像素密度
-
像素密度(屏幕密度PPI)表示每单位英寸上像素的数量,PPI的值越高,表示一定尺寸的屏幕上像素数量越多,也即同一尺寸下,PPI增加了N倍,物理像素会增加n2倍,同时每个物理像素的大小会缩小1/n2倍。
PPI = 根号下(x2+y2)/ 屏幕尺寸 其中x*y为屏幕分辨率
-
像素比(DRP),表示一个CSS像素占用几个物理像素
DPR = 物理像素 / css像素
-
更多推荐
CSS像素和物理像素
发布评论