zoukankan      html  css  js  c++  java
  • CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

    参照整理自:https://github.com/jawil/blog/issues/21   

                         http://www.jianshu.com/p/af6dad66e49a

    px:px是一个相对单位,相对的是设备像素(device pixel)    margin:2px,这里的px是逻辑像素。       

    ppi:每英寸多少像素数,放到显示器上说的是每英寸多少物理像素及显示器设备的点距。

    dpi:每英寸多少点。 也是根据物理像素的大小来决定的。

    我们通常所说的显示器分辨率其实是指桌面设定的分辨率,而不是显示器的物理分辨率。  比如手机:1080x1920px!  1个设备像素 

    DPR(设备像素比) = 设备像素/CSS像素           CSS像素 =设备独立像素 = 逻辑像素           

    ppi:每英寸的像素点(设备像素=物理像素)

    最先使用retina屏幕是iphone 4,屏幕分辨率为960 * 640(326ppi)。

    通过屏幕分辨率和屏幕尺寸就能计算出屏幕的像素密度

    最后关于设计师和前端工程师之间如何协同:
    一般由设计师按照设备像素(device pixel)为单位制作设计稿。
    前端工程师,参照相关的设备像素比(device pixel ratio),进行换算以及编码。

    设备像素(device pixel):
    设备像素设是物理概念,指的是设备中使用的物理像素。
    比如iPhone 5的分辨率640 x 1136px。

    CSS像素(css pixel):
    CSS像素是Web编程的概念,指的是CSS样式代码中使用的逻辑像素。
    在CSS规范中,长度单位可以分为两类,绝对(absolute)单位以及相对(relative)单位。px是一个相对单位,相对的是设备像素(device pixel)。



    作者:阿树
    链接:http://www.jianshu.com/p/af6dad66e49a
    來源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    深入浅出设计模式【转载】
    将EXCEL数据入ACCESS
    SFDC中的DEBUG
    2017新开始
    js获取窗体大小
    VS2005和VS2008快捷键大全
    Office云平台性能测试人员,全国火热征集中
    JQuery设置cookie|JQuery删除cookie|JQuery获取cookie 过期
    xpath操作xml
    Aptana中的中文显示乱码问题 .
  • 原文地址:https://www.cnblogs.com/njqa/p/8001158.html
Copyright © 2011-2022 走看看