移动适配的几种方案(三种方案)
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;
以上所述是小编给大家介绍的移动适配的几种方案(三种方案)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！