美文网首页
设备像素、设备独立像素

设备像素、设备独立像素

作者: shanshanfei | 来源:发表于2016-11-02 12:48 被阅读0次

    设备像素:物理像素,比如手机大小4.7英寸,可以看成显示器上一个一个的点。
    css像素:web编程中的逻辑单位,属于设备独立像素
    设备独立像素 DIPs:独立与设备的用于逻辑上衡量像素的单位(与设备无关的逻辑像素),真正显示的时候会被转换成物理像素。

    设备像素与设备独立像素的关系
    PPI:每英寸像素数(物理像素),像素密度。
    PPI =(w2+h2)开平方根 / 屏幕尺寸 PPI越高画质越细腻。
    标准PPI=160:一个像素对应一个光点。

    设备像素比DPI:window.devicePixelRatio
    设备像素比 = 设备像素 / 设备独立像素。
    不同手机下同一页面显示差异,就是因为设备像素比的原因。

    移动端设备屏幕尺寸非常多,碎片化很严重。

    实际ps测量出来的尺寸除以倍率,即为逻辑像素尺寸,所以当设计稿给到640*960时,我们要量出的宽度除以倍率2即为普通屏的宽度(iPhone 6 plus倍率达到了3)。

    无论是设计还是开发,都应该尽量以逻辑像素尺寸来进行设计沟通,在基准倍率下,1pt = 1dp = 1px。根据像素密度,真正的元素显示时按照倍率进行缩放。即:在2倍率的屏幕上,定义css样式为10px,实际显示的其实是20px。不同屏幕尺寸下的10px实际大小并不一样,虽然都是10px。

    以iPhone 5s为例,屏幕的分辨率是640×1136,倍率是2。浏览器会认为屏幕的分辨率是320×568,仍然是基准倍率的尺寸。所以在制作页面时,只需要按照基准倍率来就行了。无论什么样的屏幕,倍率是多少,都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候,需要准备2倍大小的图,通过代码把它缩成1倍大小显示,才能保证清晰。

    参考:
    http://sanwen8.cn/p/1bcT7cC.html
    http://yunkus.com/physical-pixel-device-independent-pixels/

    相关文章

      网友评论

          本文标题:设备像素、设备独立像素

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