美文网首页
移动端web开发PX单位问题

移动端web开发PX单位问题

作者: 两句挽联 | 来源:发表于2018-09-25 12:07 被阅读0次

    在页面开发过程中,对于设计给的设计稿,一般的PC页面开发的时候,很简单,使用px为单位,给多少px就标注多少。但是到了移动端的web开发,一般标注的单位是dp,这对于css里面px单位就需要转换一下了,这边简单说明一下相关点。

    几个概念

    设备像素

    设备像素,也叫物理像素,先来看看很多资料上面的描述

    它是物理概念,指的是设备中使用的物理像素(Physic pixel)。这个单位用px表示,它是一个[相对绝对单位],即在同样一个设备上,每1个设备像素所代表的物理长度(如英寸)是固定不变的(即设备像素的绝对性); 但在不同的设备之间,每1个设备像素所代表的物理长度(如英寸)是可以变化的(即设备像素的相对性);

    设备像素就是这个设备上总共有多少个这样的单位像素

    CSS像素(设备独立像素)

    这个也是一个相对单位,所以它在一个设备中具体表现为多少不确定,除受到设备宽度影响外还有以下两点可以影响它。

    • 屏幕布局视口大小
    • 屏幕的分辨率
      而我们在真实编码过程中使用的就是这个CSS像素,下面说一下CSS像素和设备像素的关系


      物理像素和CSS像素的关系

      可见,在两块不同的屏幕上面,相同的CSS像素,其展示效果一直,大小相等,但是其底层的物理像素点的个数会有较大的区别。

    DPR(设备像素比)

    关于这个值,我们有如下公式
    DPR = 物理像素点的个数/CSS像素点的个数
    举例:
    若DPR=3,则1CSS像素点等于3物理像素点,具体效果见上图。
    那我们如何获取一台手机的DPR呢,在js里面,可以通过window.devicePixelRatio来获取该值,而我们知道,screen.width可以获取屏幕的宽度

    <html>
    <div id="id1"></div>
    <div id="id2"></div>
    <script>
    document.querySelector("#id1").innerHTML=screen.width;
    document.querySelector("#id2").innerHTML=window.devicePixelRatio;
    </script>
    </html>
    

    在华为手机(1080*1920)上面显示的话,就是360和3,可见公式是OK的,1080/360=3

    DP(密度无关像素 )

    一般这个单位多见于android上面的布局,其作用是为了保证在不同设备上面同样页面的显示,官网说明如下

    在定义 UI 布局时应使用的虚拟像素单位,用于以密度无关方式表示布局维度 或位置。
    密度无关像素等于 160 dpi 屏幕上的一个物理像素,这是 系统为“中”密度屏幕假设的基线密度。在运行时,系统 根据使用中屏幕的实际密度按需要以透明方式处理 dp 单位的任何缩放 。dp 单位转换为屏幕像素很简单: px = dp * (dpi / 160)。 例如,在 240 dpi 屏幕上,1 dp 等于 1.5 物理像素。在定义应用的 UI 时应始终使用 dp 单位 ,以确保在不同密度的屏幕上正常显示 UI

    上面dpi为屏幕密度,Dots Per Inch(每英寸点数)


    dpi计算公式

    其中w为屏幕宽度,单位px,h为屏幕高度,s为屏幕尺寸,单位英寸
    DP的存在,就是为了解决android机型的不同分辨率问题,在不同的手机上面,dp和px有如下转换关系


    px与dp转换公式

    上图是px和dp的转换关系,其中px指的是物理像素

    DP和CSS像素转换

    关于DPR,大致有如下的一个关系

    DPR = 设备像素/CSS像素 = 设备像素 / 设备独立像素 ~= DPI/160
    一般我们需要获取如下几个数据

    • 手机屏幕物理宽度(devicePxWidth),如1080px
    • 设备像素比,即window.devicePixelRatio的值,如3
    • 屏幕对应的dp宽度(deviceDpWidth),例如360dp

    获取这3个值之后就比较简单了,以上面的数值为例,我们得知在该款手机上面,1dp=3px(物理像素),3px(物理像素)=1px(css像素),即1dp=1px(css像素)。

    cssPx=dp*(devicePxWidth/deviceDpWidth/devicePixelRatio)

    相关文章

      网友评论

          本文标题:移动端web开发PX单位问题

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