單位

像素 px

絕對大小

繼承倍數 em

1em = 100%

使用上一層的大小當 base 去相乘

.parent {
    font-size: 20px;
}

.child-1 {
    font-size: 1.5em;
}

.child-2 {
    font-size: 1.5em;
}

<div class="parent">
    <div class="child-1">
        <div class="child-2">
            Child-2
        </div>
    </div>
</div>

Child-2 = 20px * 1.5 * 1.5 = 45px

demo

根倍數 rem

使用 html 大小當 base 去相乘

html {
    font-size: 20px;
}

.parent {
    font-size: 40px;
}

.child-1 {
    font-size: 1.5em;
}

.child-2 {
    font-size: 1.5rem;
}

<div class="parent">
    <div class="child-1">
        <div class="child-2">
            Child-2
        </div>
    </div>
</div>

Child-2 = 20px * 1.5rem = 45px`

demo

百分比 %

同 em 會繼承，120% = 1.2em

點陣 pt

點陣式印表機單位， 1pt = 1/72in

• 72 dpi 時 1px = 1pt
• 96 dpi 時 1px = 0.75pt (72 / 96 = 0.75)

英吋 in

96 dpi 時 1in = 96px

公分 cm

96 dpi 時 1cm = 37.795275593333px

公釐 mm

96 dpi 時 1mm = 3.779527559333px

『pt』『im』『cm』『mm』 為印刷單位，實際上幾乎很少用到