动态端口定义字体大小的两种方法

实现效果:根据屏幕大小自动调整字体大小

1.普通方法

$(function(){
function setRem(){
var clientWidth=$(window).width();
var nowRem=(100*clientWidth/375);/*375这个值是设计图中测量值的一半*/
$("html").css("font-size",parseInt(nowRem, 10)+"px");
};
setRem();
$(function(){
var timer;
$(window).bind("resize",function(){
clearTimeout(timer)
timer=setTimeout(function(){
setRem();
}, 100)
})
});
});

2.移动设备,带事件操作

(function () {
var supportsOrientationChange = 'onorientationchange' in window ? 'orientationchange' : 'resize';
var timeoutId;
function setRem() {
var clientWidth = document.documentElement.clientWidth;
var nowPX = clientWidth / 375 * 100;
document.documentElement.style.fontSize = nowPX + 'px';
}
setRem();
window.addEventListener(supportsOrientationChange, function () {
clearTimeout(timeoutId);
timeoutId = setTimeout(function () {
setRem();
}, 300);
}, false);
})();
原文地址:https://www.cnblogs.com/zeussbook/p/9101083.html