我们知道，rem是一个css单位，指的是HTML根节点的字体大小。
而我们在用rem布局的时候必然会遇到一个问题：我们需要根据用户的屏幕大小去计算rem。
以下是代码。
（在VUE中使用）
... created() { // rem 适配 (function(win) { var docEl = win.document.documentElement; function refreshRem() { var width = docEl.getBoundingClientRect().width; if (width >= 1920) { // 最大宽度 width = 1920; } var rem = width / 19.2; if (rem > 100) { rem = 100; } docEl.style.fontSize = rem + "px"; if (width < 1366) { docEl.style.fontSize = 70 + "px"; } } win.addEventListener( "resize", function() { refreshRem(); }, false ); win.addEventListener( "pageshow", function(e) { if (e.persisted) { refreshRem(); } }, false ); refreshRem(); })(window); }, ...
===
（在原生项目中使用）
rem.js
(function(win) { var docEl = win.document.documentElement; function refreshRem() { var width = docEl.getBoundingClientRect().width; if (width >= 1920) { // 最大宽度 width = 1920; } var rem = width / 19.2; if (rem > 100) { rem = 100; } docEl.style.fontSize = rem + "px"; if (width < 1366) { docEl.style.fontSize = 70 + "px"; } } win.addEventListener( "resize", function() { refreshRem(); }, false ); win.addEventListener( "pageshow", function(e) { if (e.persisted) { refreshRem(); } }, false ); refreshRem(); })(window);
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 引入rem --> <script src="./js/rem.js" type="text/javascript"></script> <title>...</title> </head> ...
以上。