CSS中rem單位的使用可以很好地實現網頁自適應,而其轉換方法也十分簡單。下面將為大家介紹關于CSS如何寫rem轉換的方法。
/* 設置html字體大小為16px */ html{ font-size:16px; } /* 假設根據750px的設計稿來設置字體大小,那么文字大小為26px */ p{ font-size:1.625rem; /*26px除以16px得出1.625rem*/ }
以上代碼中,我們首先在html中設置了根元素的字體大小為16px,然后在文字大小為26px的p標簽中,使用rem單位對其進行設置。這里要注意的是,rem單位是相對于根元素的字體大小而言的,即1rem等于根元素字體大小。
因此,我們在設置根元素字體大小時,通常會設置為16px,這也是默認值。而在設計稿以750px為基準的情況下,將26px轉換為rem單位時,只需將26px除以16px即可,得出1.625rem。
通過上述方法,我們可以輕松實現根據設計稿進行網頁自適應,使網頁在不同設備上顯示效果更加統一好看。