前端蜗牛

adeng.y个人博客


移动端js转rem自适应

发布时间:2018-09-25 作者:阿灯 阅读量:37

css方法处理:

html {
  font-size: 20px
}

@media only screen and (min-width: 400px) {
  html {
    font-size:21.33333333px!important
  }
}

@media only screen and (min-width: 414px) {
  html {
    font-size:22.08px!important
  }
}

@media only screen and (min-width: 480px) {
  html {
    font-size:25.6px!important
  }
}

@media only screen and (min-width: 720px) {
  html {
    font-size:38.4px!important
  }
}


js方法处理:

(function(win) {
	var doc = win.document;
	var docEl = doc.documentElement;
	var tid;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		var rem = width / 7.5;  // 7.5为设计稿尺寸
		docEl.style.fontSize = rem + 'px';
	}

	win.addEventListener('resize', function() {
		clearTimeout(tid);
		tid = setTimeout(refreshRem, 300);
	}, false);
	win.addEventListener('pageshow', function(e) {
		if (e.persisted) {
			clearTimeout(tid);
			tid = setTimeout(refreshRem, 300);
		}
	}, false);
	refreshRem();
})(window);

标签云

© adeng.y 粤ICP备17049299号
Catfish Blog | 后台