美文网首页
梳理CSS像素、设备像素、设备独立像素之间的区别

梳理CSS像素、设备像素、设备独立像素之间的区别

作者: 小碗碗碗碗 | 来源:发表于2020-06-16 21:47 被阅读0次

    一、设备像素

    设备像素也被称作为物理像素。表示显示设备的真实像素,此像素是设备的固有属性,也就是说,从出厂的那一刻,设备像素点的大小和数目已经固定,不会再发生改变。

    分辨率1080*1920的手机
    英寸是英式的长度单位,寸是中国的长度单位。1英寸 = 2.54 厘米、1寸 = 3.33333333 厘米、 1英寸 = 0.762 寸
    1、分辨率
    通常使用分辨率来描述设备像素,例如1920*1080,表示设备横向有1920像素点,纵向有1080个像素点。

    2、屏幕尺寸
    购买电视或者手机等设备的显示器都有一个屏幕尺寸参数,比如55英寸,它既不是显示器的宽度也不是高度,而是对角线的长度,如上图所示。

    3、屏幕像素密度(PPI)
    屏幕像素密度PPI(Pixel Per Inch,简称 PPI),单位是 dpi(Dot Per Inch)。
    理论上,PPI越高越好,图像会更加细腻清晰。
    以上图设备为例,计算该手机的PPI如下。
    首先,算出对角线的尺寸:


    然后,根据计算公式算出PPI:
    PPI = 对角线的分辨率 / 对角线尺寸,即 PPI = 2203px / 5inch ≈ 440dpi,所以该手机的屏幕像素密度是440dpi。

    二、设备独立像素

    随着技术的进步,很小的屏幕能容纳很高的物理像素,比如 1920 * 1080以前只能应用于大的显示器,现在可能被容纳于一个小尺寸的移动端设备中。

    iPhone 3和iPhone 4,屏幕尺寸一样,它们的设备独立像素都是320 * 480,但后者的屏幕像素密度是前者的两倍,iPhone 3物理像素是320 * 480,iPhone 4的物理像素是640 * 960。
    如果使用设备像素作为单位,那么在视觉上看的话,iPhone 4上的div宽度是iPhone 3的一半,所以使用物理像素在web中设置尺寸是不合理的。
    因此操作系统定义设备独立像素,用设备独立像素定义的尺寸,不管屏幕的参数如何,都能以合适的大小显示。

    这就说明:
    iPhone3用 1个 物理像素表示 1个 设备独立像素
    iPhone4用 4个 物理像素表示 1个 设备独立像素
    (注:横向2个物理像素表示1个设备独立像素,纵向2个物理像素表示一个设备独立像素)
    而这一切都是由操作系统控制。

    获取设备独立像素

    三、CSS像素

    在web中所设置的像素都是CSS像素。

    设备独立像素也是可以设置的,但是一般不去设置它。所以在没有缩放、同时设备独立像素未被设置的情况下,1个CSS像素等同于1个设备独立像素。


    设备独立像素=CSS像素、未缩放

    CSS像素在视觉上是很容易改变大小的,比如缩放浏览器页面,就是改变的CSS像素,当放大一倍,那么一个CSS像素在横向或者纵向上会覆盖两个设备独立像素。
    例如:宽度100px的div,当页面放大一倍,它会在横向上由原本占据100个设备独立像素,变成占据200个设备独立像素;如果缩小,则恰好相反,只能占据50个设备独立像素。


    设备像素(深蓝色背景)、CSS像素(半透明背景)

    1、左图表示当用户进行缩小操作时,一个设备像素覆盖了多个CSS像素。
    2、右图表示当用户进行放大操作时,一个CSS像素覆盖了多个设备像素。

    无论CSS像素是缩小还是放大,它的像素数目是不变的。
    比如100px,无论缩放,它依然是100px,只不过它占据的设备独立像素发生了变化(体积发生了变化,视觉大小上发生了变化而已)。

    相关文章

      网友评论

          本文标题:梳理CSS像素、设备像素、设备独立像素之间的区别

          本文链接:https://www.haomeiwen.com/subject/evarxktx.html