CSS中有很多方法可以讓REM生效,其中最常用的是設置根元素的字體大小,來影響整個頁面的REM值:
html { font-size: 16px; /*假設1REM=16px*/ } p { font-size: 1rem; /*此時1rem=16px*/ }
根據上述代碼,我們設置了html元素的字體大小為16px,這時候1REM就等于16px。在接下來的p標簽里,我們只需要寫1rem,就能達到和16px一樣的效果。
當然,如果我們需要調整REM的值,只需要改變根元素的字體大小即可:
html { font-size: 20px; /*假設1REM=20px*/ } p { font-size: 1rem; /*此時1rem=20px*/ }
當我們把根元素的字體大小改為20px時,1REM就變成了20px。如果我們想保持p標簽的字體大小不變,只需要寫上1rem就好了。
除了設置根元素的字體大小以外,我們還可以使用JavaScript來動態修改REM的值:
window.onload = function() { var screenWidth = document.documentElement.clientWidth; /*獲取屏幕寬度*/ var html = document.getElementsByTagName('html')[0]; /*獲取html元素*/ html.style.fontSize = screenWidth / 10 + 'px'; /*設置根元素字體大小*/ };
在上述代碼中,我們獲取了屏幕的寬度,然后除以10,將結果賦值給根元素的字體大小。這樣做的效果是,當屏幕寬度增加時,REM的值也會相應地增加。
總的來說,CSS中讓REM生效的方法有很多種,我們可以根據不同的需求選擇不同的方法來實現。
上一篇css如何設置圖片投影
下一篇ajax如何發送post