html的长度单位的选择,html/CSS之长度单位详解

关于CSS的东西，比如长度单位，字体大小，文字高度等。

CSS中的尺寸单位

CSS中的长度单位很多种：cm, mm, em, pt, px

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

单位描述:%:百分比/in英寸/cm厘米/mm毫米/em 1em

等于当前的字体尺寸,2em等于当前字体尺寸的两倍.

ex

一个ex是一个字体的x-height/pt磅1pt等于1/72英寸./pc 12点活字/px像素(计算机屏幕上的一个点)

与像素的关系

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

结果约为；

1pt = 1.3px, 1mm = 3.8px, 1ex = 6px, 1em = 11px, 1pc = 16px, 1com =

37.8px, 1in = 96px;

测试代码：

canvas width: 800px; padding: 20px;