假设在css样式中定义的基准值为50px;
html {font-size:50px;}
js代码如下:
1 /*
2 根据屏幕大小动态调整rem基准值
3 */
4
5 (function (doc, win) {
6 var html = doc.getElementsByTagName("html")[0],
7 // orientationchange->手机屏幕转屏事件
8 // resize->页面大小改变事件
9 reEvt = "orientationchange" in win ? "orientationchange" : "resize",
10 reFontSize = function () {
11 var clientW = doc.documentElement.clientWidth || doc.body.clientWidth;
12 if (!clientW) {
13 return;
14 }
15 html.style.fontSize = 50 * (clientW / 375) + "px";
16 }
17 win.addEventListener(reEvt, reFontSize);
18 // DOMContentLoaded->dom加载完就执行,onload要dom/css/js都加载完才执行
19 doc.addEventListener("DOMContentLoaded", reFontSize);
20 })(document, window);
知识兔不过存在的问题是,在pad尺寸的屏幕下,通过这个代码转换后的比率会使元素高度过大,超出屏幕,要用媒体查询来重新设置pad屏幕下的各元素height:
1 @media screen and (min-width:768px){}
知识兔