在css
中,我們可以使用rem
單位來表示字體大小。這個單位的特殊之處在于它是相對于根元素(即<html>
標簽)中定義的font-size
的大小。例如,在根元素中定義font-size: 16px;
,那么1rem
就等于16px
。
html { font-size: 16px; } body { font-size: 1rem; /* 1rem 等于 16px */ }
使用rem
單位的好處在于,我們可以實現相對于根元素的響應式布局。如果我們在不同的屏幕尺寸上設置不同的根元素font-size
,我們就可以方便地支持不同的設備。
/* 對于大屏幕設備 */ @media screen and (min-width: 1200px) { html { font-size: 20px; } } /* 對于小屏幕設備 */ @media screen and (max-width: 768px) { html { font-size: 14px; } }
注意,rem
單位的值是相對于根元素而言的,而不是相對于父級元素。如果你需要相對于父級元素調整字體大小,可以使用em
單位。