瀏覽器的兼容性越來(lái)越好，移動(dòng)端基本是清一色的webkit，經(jīng)常會(huì)用到css的不同尺寸/長(zhǎng)度單位，這里做個(gè)整理。
概覽
絕對(duì)單位
px: Pixel 像素
pt: Points 磅
pc: Picas 派卡
in: Inches 英寸
mm: Millimeter 毫米
cm: Centimeter 厘米
q: Quarter millimeters 1/4毫米
相對(duì)單位
%: 百分比
em: Element meter 根據(jù)文檔字體計(jì)算尺寸
rem: Root element meter 根據(jù)根文檔（ body/html ）字體計(jì)算尺寸
ex: 文檔字符“x”的高度
ch: 文檔數(shù)字“0”的的寬度
vh: View height 可視范圍高度
vw: View width 可視范圍寬度
vmin: View min 可視范圍的寬度或高度中較小的那個(gè)尺寸
vmax: View max 可視范圍的寬度或高度中較大的那個(gè)尺寸
運(yùn)算
calc: 四則運(yùn)算
實(shí)例：
h1 {
width: calc(100% - 10px + 2rem);
}
單位比例
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
詳細(xì)
絕對(duì)單位
px – Pixel 像素
像素 px 相對(duì)于設(shè)備顯示器屏幕分辨率而言。
div { font-size: 12px }
p { text-indent: 24px }pt Points 磅
1 pt = 1/72 英寸
div { font-size: 10pt }
p { height: 100pt }pc Picas 派卡
十二點(diǎn)活字（印刷中使用的），相當(dāng)于我國(guó)新四號(hào)鉛字的尺寸。
div { font-size: 10pc }
p { height: 10pc }in Inches 英寸
div { font-size: 10in }
p { height: 10in }mm Millimeter 毫米
div { font-size: 10mm }
p { height: 10mm }cm Centimeter 厘米
div { font-size: 10cm }
p { height: 10cm }q Quarter millimeters 1/4毫米
div { font-size: 20q }
p { height: 100q }相對(duì)單位
% 百分比
相對(duì)于父元素寬度
<body>
<div class="parent">
<div class="children"></div>
</div>
</body><style>
.parent { width: 100px }
.children { width: 66.6% }
/* children的寬度為 66.6px */
</style>
em Element meter 根據(jù)文檔計(jì)算尺寸
相對(duì)于當(dāng)前文檔對(duì)象內(nèi)文本的字體尺寸而言，若未指定字體大小則繼承自上級(jí)元素，以此類(lèi)推，直至 body，若 body 未指定則為瀏覽器默認(rèn)大小。
新聞熱點(diǎn)
疑難解答
圖片精選
