• 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

  • 相关阅读:
    修改linux的ssh默认端口号22的方法
    centos6 配置静态IP
    homebrew 无法安装提示不能在根目录下使用
    MySQL Replication 详解MySQL数据库设置主从同步的方法
    两台Mysql数据库数据同步实现
    MySql主从同步和延迟同步
    c#委托和事件
    C# Out和Ref区别
    MVC与三层架构
    经典数据库题
  • 原文地址:https://www.cnblogs.com/binmengxue/p/5825805.html
Copyright © 2020-2023  润新知