H5开发像素相关问题

一:设备像素相关问题

 
二:设备像素dp(device pixels) (物理像素)
  设备像素的单位ppi(pixels per inch) 每英寸所拥有的像素(pixel)数目,数值越高,代表屏幕能以更高的密度显示图像。
     计算公式:ppi = 像素数量  / 物理尺寸(英寸数)
                                        
     
     举例:
    一个3.5寸的分辨率为320*480的屏幕a,ppi是(根号(320^2 + 480^2)) / 3.5 = 164,约等于160。
    一个3.8寸的分辨率为480*800的屏幕b,ppi是(根号(480^2 + 800^2)) / 3.8 = 245,约等于240。
    一个4.3寸的分辨率为480*800的屏幕c,ppi是(根号(480^2 + 800^2)) / 4.3 = 217,约等于210。
    一个4.3寸的分辨率为720*1280的屏幕d,ppi是(根号(720^2 + 1280^2)) / 4.3 = 342,约等于340。
    一个5.5寸的分辨率为720*1280的屏幕e,ppi是(根号(720^2 + 1280^2)) / 5.5 = 267,约等于260。
      本人电脑:(根号(1080^2 + 1920^2))/15.6 约等于 141
    一只笔的像素如下:
                             
           这只笔在屏幕c,d,e下的显示效果如下:
                           
三:设备独立像素dips(device-independent pixels) (逻辑像素)
    可看到同一张图片在各屏幕显示大小不一。
    我们希望不同屏幕显示图片的大小要一致。
    我们要计算图片缩放比例。
    计算公式:
     图片缩放后实际像素大小px2 / 图片逻辑像素大小px1 = 设备像素dp / 设备独立像素dips (4.3寸,5.5寸这种跟设备真实宽高相关的像素值)
     px2 = px1 * (dp / dips)
     px2 = px1 * dpr (设备像素比)
    此时,这只笔在屏幕c,d,e下的显示效果如下:
          
四:设备像素比dpr(devicePixelRatio) (独立像素比)
    devicePixelRatio是设备像素dp和设备独立像素dips的比例, 也就是dpr = dp / dips
 
五:css像素
    css像素是一个相对单位。
    相对不同屏幕,其代表的实际像素大小不同。
    我们定义时,是定义其逻辑像素。即该图要用多少个逻辑像素来显示。
    通过(逻辑像素 * 独立像素比) 换算到物理像素投射到不同的屏幕上,使一个元素即使在不同的屏幕上也能表现的大小相同
 
 

猜你喜欢

转载自www.cnblogs.com/AbigaleHan/p/10210868.html