如何使用rem，為什麼rem不生效？
阿新 • • 發佈：2018-12-23
rem是現在手機端用的比較普遍的單位，我最近也在用這個做一個手機站，在使用過程發現單純的css並不能實現字型隨螢幕放大縮小的效果，後來各種索搜，找到了解決方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <script> (function(){ function w() { var r = document.documentElement; var a = r.getBoundingClientRect().width;//獲取當前裝置的寬度 if (a > 720 ){//720不固定，根據設計稿的寬度定 a = 720; } rem = a / 7.2; r.style.fontSize = rem + "px" } w(); window.addEventListener("resize", function() {//監聽橫豎屏切換 w() }, false); })(); </script> <style> p{font-size: 0.3rem} </style> <body> <p>測試。。。。。測試。。。。。測試。。。。。測試。。。。。測試。。。。。</p> </body> </html>
我們只需加上上面程式碼中的那段js就可以了，然後我們寫css只需要把對應的值除以100，單位改成rem即可
注意：1、這段js最好放到頁面的body上面，讓他第一時間載入，防止網速慢而導致螢幕閃爍問題
2、當寫一畫素邊框時，最好還是使用1px來寫，因為在部分手機上0.01rem不顯示