• rem、em、px的区别


    px

    像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

    特点:

    1. IE无法调整那些使用px作为单位的字体大小;

    2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

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

     

    pt

    是一个物理长度单位,指的是72分之一英寸。9pt=12px,可以依次换算。

    em

    相对长度单位,相对于当前对象内文本的字体尺寸。任意浏览器的默认字体高都是16px,所以未经调整的浏览器都符合: 1em=16px。

    特点:

    1. em的值并不是固定的;

    2. em会继承父级元素的字体大小。

    <div style="font-size:20px;">
        <p style="font-size:1em;">这里1em=20px</p>
        <p style="font-size:2em;">这里2em=40px</p>
    </div>

    上面的例子就说明了em的值并非固定的,他是根据父元素的字体大小来决定的。如果父元素设置了font-size:20px,那么1em=20px,2em=40px;如果父元素设置了font-size:30px,那么1em=30px,2em=60px。依次类推。

    rem

    CSS3新增的一个相对单位,可以理解为"root em",相对于根节点html的字体大小来计算的,chrome/firefox/IE9+支持。任意浏览器的默认字体高都是16px,所以未经调整的浏览器都符合: 1rem=16px。

    <html style="font-size:100px;">
    <head>
        <title></title>
    </head>
    <body>
         <p style="font-size:1rem;">这里1rem=100px</p>
         <div style="font-size:50px;">
              <p style="font-size:2rem;">这里2rem=200px</p>
         </div>
    </body>
    </html>

    上面的例子说明了,rem的值只受到根节点html的字体大小影响,并不受父元素字体大小的影响。如果根节点html设置了font-size:100px,那么1rem=100px,2rem=200px;如果根节点html设置了font-size:200px,那么1rem=200px,2rem=400px。依次类推。

    rem和em在为元素设置字体大小时,都是相对大小。区别在于:使用rem时,相对的只是HTML根元素。

    rem这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

    注意:

    谷歌浏览器chrome强制最小字体为12px,因此即使设置了小于12px的值,也会显示成12px。因此,当你给html设置font-size:10px时,1rem并不是等于10px,而是等于12px

    具体使用哪种字体单位,还是要根据项目实际情况来定的。rem更加适合不用考虑低版本浏览器兼容问题的项目来使用。

  • 相关阅读:
    Unity3d之UGUI- Image拦截Button响应事件
    hdu1114Piggy-Bank(完全背包)
    cf455A boredom
    hdu2084数塔(入门级dp)
    小米线刷出现remote: partition table doesn't exist
    km算法
    hdu1069 Girls and Boys
    CF1203C Common Divisors
    魔法部落
    java命令行运行出现找不到或无法加载类
  • 原文地址:https://www.cnblogs.com/sakurayeah/p/5776298.html
Copyright © 2020-2023  润新知