移动适配的几种方案(三种方案)
1.直接利用js适配
(function(doc,win){ vardocEl=doc.documentElement, resizeEvt='orientationchange'inwindow?'orientationchange':'resize', recalc=function(){ varclientWidth=docEl.clientWidth; if(!clientWidth)return; docEl.style.fontSize=100*(clientWidth/750)+'px'; }; if(!doc.addEventListener)return; win.addEventListener(resizeEvt,recalc,false); doc.addEventListener('DOMContentLoaded',recalc,false); })(document,window);
例如:100px=1rem;10px=0.1rem;1px=0.01rem;
2.利用js+less适配
(function(win){ functionsetUnitA(){ document.documentElement.style.fontSize=document.documentElement.clientWidth/10+"px"; } varh=null; window.addEventListener("resize",function(){clearTimeout(h);h=setTimeout(setUnitA,300);},false); setUnitA(); })(window);
less:文件顶部定义@unit:750/10rem,然后css全文件的单位直接用@unit。
例如:100px=100/@unit;10px=10/@unit;1px=1/@unit;
3.利用less适配。
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; } } @unit:40rem;
例如:100px=100/@unit;10px=10/@unit;1px=1/@unit;
以上所述是小编给大家介绍的移动适配的几种方案(三种方案),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!