CSS中rem是個相對單位,是相對于根元素(即HTML元素)字體的大小而言的。rem是一種相對的長度單位,它是相對于根元素的字體大小來計算的,而不是相對于父元素。
在瀏覽器的默認情況下,根元素的字體大小是16px。這就意味著如果你將元素的寬度或高度設置為1rem,它將等于16px。如果你將發生任何變化的密度設置為2rem,它將等于32px,以此類推。
/* 定義根元素字體大小 */ html { font-size: 16px; } /* 在根元素下定義元素寬度和高度 */ .element { width: 10rem; /* 等于160px */ height: 5rem; /* 等于80px */ }
需要注意的是,如果你在頁面中有幾個相互嵌套的元素,那么rem的大小將基于最內部的元素(最接近于被測元素)的字體大小來進行計算。
總之,使用CSS的rem作為長度單位非常方便。只要你在頁面中設置根元素的字體大小為16px,你就可以輕松地計算出元素的大小和位置,而不必擔心像像素這樣不便于調整的絕對單位。