失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 移动端rem适配(375)设计稿

移动端rem适配(375)设计稿

时间:2019-08-30 20:01:58

相关推荐

移动端rem适配(375)设计稿

<script>

/**

* ================================================

* 设置根元素font-size

* 当设备宽度为375(iPhone6)时,根元素font-size=16px;

× ================================================

*/

(function (doc, win) {

var docEl = win.document.documentElement;

var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

var refreshRem = function () {

var clientWidth = win.innerWidth

|| doc.documentElement.clientWidth

|| doc.body.clientWidth;

console.log(clientWidth)

if (!clientWidth) return;

var fz;

var width = clientWidth;

fz = 16 * width / 375;

docEl.style.fontSize = fz + 'px';//这样每一份也是16px,即1rem=16px

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, refreshRem, false);

doc.addEventListener('DOMContentLoaded', refreshRem, false);

refreshRem();

})(document, window);

</script>

如果觉得《移动端rem适配(375)设计稿》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。
相关阅读
移动端适配   rem

移动端适配 rem

2020-12-23

移动端适配rem

移动端适配rem

2021-05-03

移动端 REM 适配

移动端 REM 适配

2024-01-22

关于移动端rem适配

关于移动端rem适配

2019-11-17