关于CSS长度单位
很久没有更新日志了，乘着夜色休息前的一点时间，记下一些关于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>
<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>
运行结果
