H5中REM中使用的规则

/*REM单位换算方法 iphone6适配*/

function resizeRoot(){
       var Dpr = 1, uAgent = window.navigator.userAgent;
    var isIOS = uAgent.match(/iphone/i);
    var wWidth = (screen.width > 0) ? (window.innerWidth >= screen.width || window.innerWidth == 0) ? screen.width : window.innerWidth : window.innerWidth, wDpr, wFsize;
    if (window.devicePixelRatio) {
        wDpr = window.devicePixelRatio;
    } else {
        wDpr = isIOS ? wWidth > 818 ? 3 : wWidth > 480 ? 2 : 1 : 1; 
    }
    if(isIOS) wWidth = screen.width;
    wFsize = wWidth > 1080 ? 144 : wWidth / 7.5; 
    window.screenWidth_ = wWidth;
    document.getElementsByTagName('html')[0].dataset.dpr = wDpr; 
    document.getElementsByTagName('html')[0].style.fontSize = wFsize + 'px';
}
//判断安卓手机浏览器低版本的用ready方法执行
function appsion(){
    uAgent = window.navigator.userAgent;
    var isIOS = uAgent.match(/iphone/i);
    if(navigator.appVersion.substring(navigator.appVersion.length-6)<537 && !isIOS){        
        document.ready=function(){
            resizeRoot();
        }    
    }else{
        resizeRoot();
    }
}
appsion();
//rem配置方法执行

计算APP高度

var winWidth = 0; 
var winHeight = 0; 
function findDimensions() //函数:获取尺寸 
{ 
//获取窗口宽度 
if (window.innerWidth) 
winWidth = window.innerWidth; 
else if ((document.body) && (document.body.clientWidth)) 
winWidth = document.body.clientWidth; 
//获取窗口高度 
if (window.innerHeight) 
winHeight = window.innerHeight; 
else if ((document.body) && (document.body.clientHeight)) 
winHeight = document.body.clientHeight; 
//通过深入Document内部对body进行检测,获取窗口大小 
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) 
{ 
winHeight = document.documentElement.clientHeight; 
winWidth = document.documentElement.clientWidth; 
} 
//结果输出至两个文本框 
} 
findDimensions(); 
//调用函数,获取数值 
window.onresize=findDimensions; 
function loadAddButton(id){
    // window.onload=function(){
         var d1=document.getElementById(id);
         var h1=d1.clientHeight+d1.scrollHeight;
         var h2=d1.offsetHeight+40;
         var wheight = winHeight;
         
         if(h2<wheight){
            // alert(wheight);
            // alert("wheight:"+wheight);
            // alert("wheight:"+wheight);
             document.getElementById(id).style.height=wheight+"px";
         }else {//alert("h2:"+h2);
             document.getElementById(id).style.height=h2+"px";
         }
        //}
}




function loadAddlist(id,height){
     findDimensions(); 
     var wheight = winHeight - height;
     document.getElementById(id).style.height=wheight+"px";
}
function bodyheight(){
    findDimensions();
    var body = document.getElementsByTagName("body")[0];
    body.style.height=winHeight+"px";
}

function getBodyheight(){
    findDimensions();
    return winHeight;
}
jQuery(function(){
    bodyheight();    
    addEvent(window, 'resize', function () {
        setTimeout(function(){            
            bodyheight();            
        },300);        
    });
});
function addEvent(e, n, o){
    if(e.addEventListener){
         e.addEventListener(n, o,false);
    } else if(e.attachEvent){
        e.attachEvent('on' + n, o);
    }
}

页面用rem为单位写,但注意点:

1.最外面的宽度用百分比,最好不要用rem

2.input中line-height不要用,如果字被截,那把文字大小缩小

3.高度要用rem

原文地址:https://www.cnblogs.com/binmengxue/p/5825805.html