設定HTML的font-zise，使rem更好的相容移動端
阿新 • • 發佈：2018-12-23
現在使用PX都不怎麼適應手機端，自從有了rem之後，徹底告別px，rem的大小是隨著HTML的font-size打大小來決定的，所以，在不同寬度的裝置，用JS改變html的font-size就可以完美的使用rem了。
可以直接複製我下面那段html來預覽demo。
1rem = html的font-size的大小
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <script> //設定HTML的font-zise (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); //end </script> </head> <body> <p style="font-size:0.5rem">html的font-size會隨著視窗大小變化而改變, JS就上面那一段而已。</p> <p style="font-size:0.5rem">1rem = html的font-size</p> <button style=" padding:0.2rem 0.5rem; background:#eee; font-size:0.6rem">我是按鈕</button> </body> </html>