一、解决思路
1.1.用rem单位记字体大小
1.1.1.rem单位是相对于html的字体大小的单位。html的字体大小 = 1rem
1.1.2.让html的字体大小随屏幕变化起来,这里可以用js实现
二、解决方案
2.1.js代码如下
(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in win ? '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)
2.2.js代码如下
(function(doc, win) { var docEl = doc.documentElement, //设置事件值,判断orientationchange事件是否存在,存在就用这个事件,不存在就用事件resize resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize', //设置函数,页面根元素字体大小为一个可调节的值 recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; }; //如果不存在doc.addEventListener函数则退出。 if (!doc.addEventListener) return; // 在window窗口发生变化时,即发生orientationchange事件,或resize事件时,执行recalc函数 win.addEventListener(resizeEvt, recalc, false); // 在document发生DOMContentLoaded事件时,执行recalc函数 doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window)
博主联系方式:
- 微信:34419369
- QQ: 34419369
- 公众号:前方录
- 有什么不懂的地方欢迎联系我,帮到你是我会很开心