CSS3.0中引入了一種新的長度單位:rem。rem是相對于根元素(html)的字體大小計算的。這意味著,當我們改變根元素的字體大小,整個頁面中使用rem作為單位的元素都將相應地發生變化。
以下是一個基本的rem示例代碼:
html { font-size: 16px; } div { font-size: 2rem; /* = 2 * 16px = 32px */ }
在上面的代碼中,我們首先設置根元素的字體大小為16px。隨后,我們將一個div元素的字體大小設置為2rem,這意味著它的字體大小將為32px(2 * 16px)。
使用rem可以讓我們快速而方便地使用相對長度單位,從而實現響應式設計。例如,我們可以通過使用媒體查詢來在不同的屏幕尺寸下改變根元素的字體大小,從而使整個頁面的布局和樣式隨著屏幕大小的變化而自適應調整。
總之,rem是CSS3.0中一個非常有用的長度單位,通過相對于根元素的字體大小來計算,它可以幫助我們更快速、更輕松地實現響應式設計,并讓頁面的樣式更加靈活和適應不同的設備和屏幕尺寸。