使用rem,动态设置root font size
(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 = clientWidth / 7.5 + 'px'; //等价于clientWidth / 750 * 100 + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false);//resize doc.addEventListener('DOMContentLoaded', recalc, false);//reload })(document, window);
<head> <meta charset="utf-8"> <title></title> <meta name="keywords" content="cms" /> <meta name="description" content="cms"/> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" /> <link rel="stylesheet" type="text/css" href="css/index.css"> <script type="text/javascript"> //为页面html动态设置font-size值 (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 = clientWidth / 7.5 + 'px'; //等价于clientWidth / 750 * 100 + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false);//resize doc.addEventListener('DOMContentLoaded', recalc, false);//reload })(document, window); </script> </head> <body> </body> </html>