zoukankan      html  css  js  c++  java
  • rem、px、em、pt、drp、dpi有何不同

    1.关于长度单位

      在CSS中长度分为相对长度和绝对长度。

      相对长度单位:相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用

      绝对长度单位:绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)。

           在这几个中,em/rem/px属于相对长度单位,其余属于绝对长度单位。

    2.各个单位定义

    (1)像素px:像素(px)是相对于显示器屏幕分辨率而言的,它一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果 px 要换算成物理长度,需要指定精度 DPI,在扫描打印时一般都有 DPI 可选。由于屏幕大小的差异性,相同大小的字体在不同屏幕下显示的效果差异比较大。那么动态的放大/缩小字体就变得比较重要。显然针对每一处的字体设置都去做兼容是复杂的,于是就有了后面的 em 和 rem。

    (2)em:相对于当前对象内文本的字体尺寸。em 会继承父级元素的字体大小。由此,只需要改变父元素的字体大小,就可以同步放大或缩小子元素的字体。浏览器默认的字体大小为16px,那么设置body选择器中设置:font-size:62.5% (10 ÷ 16 × 100% = 62.5%),现在想要设置h1字体大小为18px,只需设置font-size:1.8em即可。需要注意的是,如果h1中的p元素字体大小想设置为9px,则需要设置font-size:0.5em,而不是font-size:0.9em。即使用时需要重新计算那些被放大的字体的 em 数值。避免字体大小的重复声明。

    (3)pt:印刷业上常使用的单位,磅的意思,一般用于页面打印排版,它等于1/72英寸。

    (4)rem:是CSS3中新增加的一个单位值,和em单位一样,都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算;rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系,实现了类似于em单位的功能。

    (5)dpi:每英寸像素数。Windows 系统默认是 96dpi,Apple 系统默认是 72dpi。 

    3.浏览器特性

    (1)所有浏览器默认字体大小为16px。常见设置为把body的字体大小设为62.5%,刚好为10px。

    (2)IE无法调整使用px作为单位的字体大小,即客户端不能自己设置字体大小。(待验证)

    (3)Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。(待验证)

    4.单位之间的转换

    (1)px与pt

      1px =( DPI / 72)*pt

      1pt = (72/DPI)*px

    (2)px与pt

      16px=12pt

    (3)像素px与毫米

      象素数 / DPI = 英寸数
      英寸数 * 25.4 = 毫米数

      一英寸等于25.4mm。那么毫米换算成像素的公式为:

      水平方向的换算: x * px /25.4
      垂直方向的换算: y * py /25.4
      像素换算为毫米: x * 25.4 / px

    (4)pt/px/em/percent 换算参考

      以 Windows 下的 96dpi 作参考,则有:pt = px72/96 = px3/4。

      再考虑浏览器的默认字体大小是 16px,

      那么就有    12pt  16px 1em 100%

    参考链接:https://lzw.me/a/pt-px-em-rem.html#dpidots-per-inch

  • 相关阅读:
    openldap
    Java实现 洛谷 P1200 [USACO1.1]你的飞碟在这儿Your Ride Is He…
    Java实现 洛谷 P1200 [USACO1.1]你的飞碟在这儿Your Ride Is He…
    Java实现 洛谷 P2141 珠心算测验
    Java实现 洛谷 P2141 珠心算测验
    Java实现 洛谷 P2141 珠心算测验
    Java实现 洛谷 P2141 珠心算测验
    Java实现 洛谷 P2141 珠心算测验
    Java实现 洛谷 P1567 统计天数
    Java实现 洛谷 P1567 统计天数
  • 原文地址:https://www.cnblogs.com/bulaliu/p/8424906.html
Copyright © 2011-2022 走看看