在Vue中,CSS的單位和尺寸問題是經常被提及的話題。而在使用rem單位時,我們需要注意幾點:
/* set default font size */ html { font-size: 16px; } /* define a mixin to convert px to rem */ @mixin rem($px) { $remSize: $px / 16px; /* divide by default font size */ font-size: $remSize + rem; } /* use the mixin to set a font size in rem */ h1 { @include rem(48px); /* convert 48px to 3rem */ }
以上是一份關于rem在Vue中的樣式代碼。我們首先在html元素中定義了默認字號為16px,然后定義了一個轉換單位為rem的mixin。在需要使用rem單位的時候,我們使用這個mixin將像素值轉換為rem值去定義需要修改的CSS屬性,這可以保證不論如何縮放瀏覽器窗口,都可以保持頁面的一致性。
需要注意的是,rem單位是相對于根元素的字號而言的,例如在上面的代碼中,如果我們將根元素的字號修改為20px,那么此時1rem的大小就會變成20px而不是原來的16px。