实现不同分辨率下高度自适应

Posted 有理想而不理想化

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现不同分辨率下高度自适应相关的知识，希望对你有一定的参考价值。

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jQuery.js"></script>
        <script type="text/javascript" src="js/js.js"></script>
        <style type="text/css">
            /*
             * 设置高度自适应，让在普通分辨率下和大屏分辨下，都能铺满屏。
             1.设置最外层html的 font-size: 12px;
            */
            html,body{font-family: "微软雅黑";font-size: 12px;width: 99%;height: 100%;  min-width: 1340px;  background-color: #04101E;margin: 0 auto;}
            /*
             2.高度用rem单位。
               最外层html的 font-size: 12px;如果div的height是24px，那用24/12=2rem；相当于1rem=12px；
            */
            .div1,.div2,.div3{
                width: 100%;
                height: 18.33rem;
                
            }
            .div1{background-color:#ff1aaf ;}
            .div2{background-color:#AA86E6 ;}
            .div3{background-color:#189189 ;}
        </style>
    </head>
    <body>
        <div class="div1">撑起div的高度</div>
        <div class="div2">撑起div的高度</div>
        <div class="div3">撑起div的高度</div>
    </body>
</html>

 

js:

// 放到头部（初始化位置
$(document).ready(function(){
    setRem();
    $(window).resize(function(){
        setRem();
    });
})

function setRem(){
    //alert("12");
    var sWidth=document.documentElement.clientWidth;
    var sHeight=document.documentElement.clientHeight;
    if(sWidth>1366){
        $("html").css("font-size",sWidth/1366*12+"px");
        return;
    }
    if(sHeight>768){
        $("html").css("font-size",sHeight/768*12+"px");
    }
};

 

以上是关于实现不同分辨率下高度自适应的主要内容，如果未能解决你的问题，请参考以下文章

前端页面高度和宽度自适应怎么做？

css样式自适应分辨率

easyui Datagrid 表格高度计算及自适应页面的实现

宽度100%，高度自适应

运用@media实现网页自适应中的几个关键分辨率

Grid形式的RecyclerView屏幕宽度自适应