学习css中的宽度 px em rem

今天学习了css中的宽度，记录一下。
* px像素（Pixel）绝对长度单位。像素px是相对于显示器屏幕分辨率而言的；
* em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
* rem是CSS3中新添加的，相对于根的比例，但相对的只是HTML根元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        html {
            /*1.  最小的字体大小是12px，默认的字体大小是16px*/
            font-size: 62.5%;  /*16px 62.5% = 10px */
        }

        #d { 
            font-size: 10em;  /*10 x 10px = 100px  */
            width: 100px;
            background-color: red;
        }
        #p1 {
            font-size: 2rem;
        }
        #p2 {
            font-size: 25px; /*固定宽度*/
        }
    </style>
</head>
<body>
    <div id="d">
        hello div
        <p id="p1">
            hello p1
        </p>
        <p id="p2">
            hello p2
        </p>
    </div>
    <script>
       var div = document.getElementById('d')
       var p1 = document.getElementById('p1')
       var p2 = document.getElementById('p2')
       alert(getComputedStyle(div,false).fontSize) //100px 相对于父元素的10倍
       alert(getComputedStyle(p1,false).fontSize)    //20px 相对于跟元素的2倍
       alert(getComputedStyle(p2,false).fontSize)    //固定宽度25px
    </script>
</body>
</html>

所以我们在写CSS的时候，需要注意两点：

  • 1 . html选择器中声明Font-size=62.5%；

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

参考网站：http://www.cnblogs.com/leejersey/p/3662612.html