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>

     

  • 相关阅读:
    解决类似 /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found 的问题
    qemu vm setup network(ssh) with buildroot
    C: 当字符数组首指针转化成char *指针,sizeof(*ptr)不为array的size
    C 利用strtok, feof 截取字符串
    LINUX C: 获取本地指定网卡的IP地址
    C语言比较好的风格梳理
    perf-perf stat用户层代码分析
    内核调试-perf introduction
    内核调试-ftrace introduction
    【原创】VB6.0应用程序安装包的生成(Setup Factory 9.0制作安装包的方法)
  • 原文地址:https://www.cnblogs.com/codinganytime/p/5194866.html
Copyright © 2011-2022 走看看