发表于 & 归档在 HTML, Web.

很久没有更新日志了,乘着夜色休息前的一点时间,记下一些关于CSS的东西,比如长度单位,字体大小,文字高度等。

CSS中的尺寸单位

CSS中的长度单位很多种:cm, mm, em, pt, px …其中“px”也就是像素用处最多。这些单位分两种类型,一种是绝对长度,或者称为“真实长度”,比如厘米,毫米,英寸,这些都是物理学中标准的长度单位,在打印文档时有重要意义,因为你设置多大尺寸,打印出来就是真实的尺寸,但对于电脑屏幕来说,这些所谓的“真实长度”也并非真实的长度,你可以用尺子对着电脑屏幕测量,一个10cm宽度的div通常不会是10cm,如果你问我到底有多长,我会告诉你电脑中的“10cm”约等于378像素,至于这378个像素到底有多长,不同的显示器会是不同的结果,比如iPhone4的视网膜(这里有误,视网膜技术与分辨率没有实际关系)屏幕上面378像素宽度可能不到5厘米,这就是绝对长度与像素长度的区别

下面引用w3school中的列表:http://www.w3school.com.cn/css/css_units.asp

单位 描述
% 百分比
in 英寸
cm 厘米
mm 毫米
em 1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。例如,如果某元素以 12pt 显示,那么 2em 是24pt。

在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。

ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt 磅 (1 pt 等于 1/72 英寸)
pc 12 点活字 (1 pc 等于 12 点(作者注:此处应该为磅,也就是pt))
px 像素 (计算机屏幕上的一个点)

与像素的关系

前面说到屏幕上的10厘米等于378像素,那么其他单位与像素是什么样的比例关系呢,除了“%”是一个相对长度外,每个长度单位都与像素有个固定的比例,下面我用个简单的脚本来寻求答案:

结果约为;

1pt = 1.3px, 1mm = 3.8px, 1ex = 6px, 1em = 11px, 1pc = 16px, 1com = 37.8px, 1in = 96px;

测试代码

<!DOCTYPE html>
<html>
<head><!-- yCoder.com -->
    <title>Measure Demo</title>
    <style>
        body{
            margin:0;
            background-color: gray;
            font-size: 11px;
            font-family: RedCircleRegular, verdana, helvetica, arial, sans-serif;
        }
        .Panel{
            width: 800px;
            height: 800px;
            background-color: white;
            margin: 20px auto;
            border: solid 16px #EEEEEE;
            box-shadow: 0 0 16px #000000;
            border-radius: 8px;
            overflow: auto;
            position: relative;
            padding: 20px;
        }
        .Node{
            background-color: white;
            border: solid 1px red;
            position: absolute;
            white-space:nowrap;
        }
    </style>
    <script type="text/javascript">
        function init(){
            var canvas = document.getElementById("canvas");
            var units = ["%", "px", "pt", "mm", "ex", "em", "pc", "cm", "in"];
            var width = 10;
            for(var i=0,l=units.length; i<l; i++){
                var div = createNode(units[i], canvas);
                div.style.top = (50 + 30 * i) + "px";
                div.style.width = width + units[i];
                div.innerHTML = "width : " + width + units[i] + " = " + div.clientWidth + "px";
            }

        }
        var index = 0;
        function createNode(innerHTML, parent){
            var div = document.createElement("div");
            div.id = index++;
            div.setAttribute("class", "Node");
            div.innerHTML = innerHTML;
            if(parent){
                parent.appendChild(div);
            }
            return div;
        }
    </script>
</head>
<body onload="init()">
<div id='canvas' class="Panel" >
    canvas width: 800px; padding: 20px;
</div>
</body>
</html>

运行结果

发表评论

电子邮件地址不会被公开。 必填项已用*标注


1 + = 五

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>