zoukankan      html  css  js  c++  java
  • em,pt和px之间的换算

    任意浏览器的默认字体高度16px(16像素)。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

     

    12px相当于9pt长度;
    12px相当于0.75em长度;
    9pt相当于0.75em长度;

     

    高级em与px换算:
    任意浏览器的默认字体高度16px(16像素)。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明 font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

     

    具体使用时候我们在对全体html标签声明初始一次font-size=62.5%;如:

             *{font-size=62.5%}
             即可此后面布局可依据以下技巧进行设置em单位
             font-size:1.2em等于font-size:12px
             font-size:1.4em等于font-size:14px
             以此类推相当于初始font-size=62.5%后,em与px单位就只有10倍差距,以便方便计算与设置em长度数值使用。

     

    em单位有如下特点:    

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

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

    我们在写CSS的时候如果要用em为单位,需要注意两点:

      1. body选择器中声明Font-size=62.5%;

      2. 将你的原来的px数值除以10,然后换上em作为单位;

      3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

      也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

      但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。 这个问题 Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有 其他的解释。

     

     

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>em</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 300px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                margin: 10px auto;
                background: #ccc;
            }
            .demo1{
                font-size: 14px;
            }
            .demo2{
                font-size: 14pt;
            }
            .demo3{
                font-size: 1.4em;
            }
        </style>
    </head>
    <body>
    <div class="demo1">单位是PX</div>
    <div class="demo2">单位是PT</div>
    <div class="demo3">单位是EM</div>
    </body>
    </html>

     

  • 相关阅读:
    SDUT 2143 图结构练习——最短路径 SPFA模板,方便以后用。。 Anti
    SDUT ACM 1002 Biorhythms 中国剩余定理 Anti
    nyist OJ 119 士兵杀敌(三) RMQ问题 Anti
    SDUT ACM 2157 Greatest Number Anti
    SDUT ACM 2622 最短路径 二维SPFA启蒙题。。 Anti
    二叉索引树 区间信息的维护与查询 Anti
    SDUT ACM 2600 子节点计数 Anti
    UVA 1428 Ping pong 二叉索引树标准用法 Anti
    2010圣诞Google首页效果
    Object
  • 原文地址:https://www.cnblogs.com/codinganytime/p/5194866.html
Copyright © 2011-2022 走看看