当前位置: 首页 > Web前端 > HTML5

js动态计算移动端rem适配

时间:2023-04-05 01:35:32 HTML5

第一:css3媒体查询实现适配,比如如下:html{font-size:20px;}@mediaonlyscreenand(min-width:401px){html{font-size:25px!important;}}@mediaonlyscreenand(min-width:428px){html{font-size:26.75px!important;}}@mediaonlyscreenand(min-width:481px){html{font-size:30px!important;}@mediaonlyscreenand(min-width:569px){html{font-size:35px!important;}}@mediaonlyscreenand(min-width:641px){html{font-size:40px!important;二、通过js动态设置html字体,例如如下vardocEl=doc.documentElement,resizeEvt='orientationchange'inwindow?'orientationchange':'resize',recalc=function(){varclientWidth=docEl.clientWidth;如果(!clientWidth)返回;//默认设计图为640时1rem=100px;修改if(clientWidth>=640){docEl.style.fontSize='100px';}else{文档样式。fontSize=100*(clientWidth/640)+'px';}};如果(!doc.addEventListener)返回;win.addEventListener(resizeEvt,recalc,false);doc.addEventListener('DOMContentLoaded',recalc,false);})(文档,窗口);