JS动态计算移动端rem的解决方案
在做移动端webapp的时候，众所周知，移动设备分辨率五花八门，虽然我们可以通过CSS3的mediaquery来实现适配，例如下面这样：
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解决方案，例如下面这样:
;(function(doc,win,undefined){
vardocEl=doc.documentElement,
resizeEvt='orientationchange'inwin?'orientationchange':'resize',
recalc=function(){
varclientWidth=docEl.clientWidth;
if(clientWidth===undefined)return;
docEl.style.fontSize=20*(clientWidth/320)+'px';
};
if(doc.addEventListener===undefined)return;
win.addEventListener(resizeEvt,recalc,false);
doc.addEventListener('DOMContentLoaded',recalc,false)
})(document,window);
另外附上淘宝移动端适配解决方案flexible.js源码:
;(function(win,lib){
vardoc=win.document;
vardocEl=doc.documentElement;
varmetaEl=doc.querySelector('meta[name="viewport"]');
varflexibleEl=doc.querySelector('meta[name="flexible"]');
vardpr=0;
varscale=0;
vartid;
varflexible=lib.flexible||(lib.flexible={});
if(metaEl){
//将根据已有的meta标签来设置缩放比例
varmatch=metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
if(match){
scale=parseFloat(match[1]);
dpr=parseInt(1/scale);
}
}elseif(flexibleEl){
varcontent=flexibleEl.getAttribute('content');
if(content){
varinitialDpr=content.match(/initial\-dpr=([\d\.]+)/);
varmaximumDpr=content.match(/maximum\-dpr=([\d\.]+)/);
if(initialDpr){
dpr=parseFloat(initialDpr[1]);
scale=parseFloat((1/dpr).toFixed(2));
}
if(maximumDpr){
dpr=parseFloat(maximumDpr[1]);
scale=parseFloat((1/dpr).toFixed(2));
}
}
}
if(!dpr&&!scale){
varisAndroid=win.navigator.appVersion.match(/android/gi);
varisIPhone=win.navigator.appVersion.match(/iphone/gi);
vardevicePixelRatio=win.devicePixelRatio;
if(isIPhone){
//iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
if(devicePixelRatio>=3&&(!dpr||dpr>=3)){
dpr=3;
}elseif(devicePixelRatio>=2&&(!dpr||dpr>=2)){
dpr=2;
}else{
dpr=1;
}
}else{
//其他设备下，仍旧使用1倍的方案
dpr=1;
}
scale=1/dpr;
}
docEl.setAttribute('data-dpr',dpr);
if(!metaEl){
metaEl=doc.createElement('meta');
metaEl.setAttribute('name','viewport');
metaEl.setAttribute('content','initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no');
if(docEl.firstElementChild){
docEl.firstElementChild.appendChild(metaEl);
}else{
varwrap=doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
functionrefreshRem(){
varwidth=docEl.getBoundingClientRect().width;
if(width/dpr>540){
width=540*dpr;
}
varrem=width/10;
docEl.style.fontSize=rem+'px';
flexible.rem=win.rem=rem;
}
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);
if(doc.readyState==='complete'){
doc.body.style.fontSize=12*dpr+'px';
}else{
doc.addEventListener('DOMContentLoaded',function(e){
doc.body.style.fontSize=12*dpr+'px';
},false);
}
refreshRem();
flexible.dpr=win.dpr=dpr;
flexible.refreshRem=refreshRem;
flexible.rem2px=function(d){
varval=parseFloat(d)*this.rem;
if(typeofd==='string'&&d.match(/rem$/)){
val+='px';
}
returnval;
}
flexible.px2rem=function(d){
varval=parseFloat(d)/this.rem;
if(typeofd==='string'&&d.match(/px$/)){
val+='rem';
}
returnval;
}
})(window,window['lib']||(window['lib']={}));
以上所述是小编给大家介绍的JS动态计算移动端rem的解决方案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！