实现效果:根据屏幕大小自动调整字体大小
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);
})();