PC端浏览器自适应(火狐、谷歌、IE11),媒体查询@media

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    body,html,*{
        padding:0px;
        margin:0px;
    }
    div{
        box-sizing:border-box;
        -moz-box-sizing:border-box; /* Firefox */
        -webkit-box-sizing:border-box; 
    }
    .containner{
        width: 100%;
        height: 1080px;
        background-color: #999;
    }
   .wrapper{
        width: 98%;
        height: 98%;
        margin:0 auto;
        background-color: rgba(20,220,28,0.5)
   }
   .top{
        height: 10%;
        width: 100%;
        background-color: yellow;
   }
   .bottom{
        height: 5%;
        width: 100%;
        background-color: blue;
   }
   .content{
        width: 100%;
        height:83%;
        margin: 1% 0 1% 0;
        border:3px dashed purple;
   }
   .child-top{
        width: 100%;
        height: 40%;
        overflow: hidden;
   }
   .chile-one{
        width:60%;
        height: 100%;
        border: 1px solid green;
        margin-right:2%;
        float: left;
   }
   .chile-two{
        width:30%;
        height: 100%;
        border: 1px solid red;
        margin-right:2%;
        float: left;
   }
   .chile-bottom{
        width: 100%;
        height: 60%;
        background-color: pink;
   }
   /*注释:
        a.此方案适用于PC端宽度自适应,高度会出现滚动条的情况
        b.由于UI设计按照1920*1080的分辨率设计的,所以要实现自适应需先算出各部分子元素的百分比,来实现流布局
        c.此方案优势:可实现不同分辨率下各模块等比例显示;
        c.PC端各分辨率下根元素高的计算方法:Height = (1080/1920)*当前分辨率width;Weight = 100%【即当前分辨率下浏览器可视区域的宽度】;各子元素宽计算方法:(【1920*1082分辨率下设计的实际宽度】/1920)*100%,子元素高计算方法同宽的计算方法
        d.由于PC端屏幕分辨率比例不同,所以根据1080*1920分辨率的比例计算出的根元素的宽高可能会出现两种情况:
            1.浏览器页面可视区域的高度 > 页面计算得到的根元素高度   现象:页面纵向出现空白
                eg:1400*1050分辨率下,计算得根元素div.containner的Height = (1080*1920)*1400 = 787.5px,
                但浏览器页面可视区域的高度window.innerHeight = 【谷歌:944px】、【火狐:917px】、【IE11:932px】,
                。
                解决办法:见【不符合比例出现空白的处理方法】
                    原理:页面根元素的高度 = Max(window.innerHeight) ——> 取当前分辨率下浏览器页面可视区域的高度的最大值
                实现结果:页面不出现滚动条或出现纵向滚动条
            2.浏览器页面可视区域的高度 <= 页面计算得到的根元素高度  现象:此现象合理
                解决办法:见【符合比例不出现空白的处理方法】
            
    */
   /*
   符合比例不出现空白的处理方法:
   */
   @media screen and (max-width: 1680px) and (max-height: 1050px){
        .containner{
            height: 945px; 
            /*(1080*1920)*1680 = 945*/
        }
   }
   @media screen and (max-width: 1600px) and (max-height: 900px){
        .containner{
            height: 900px;
        }
   }
   @media screen and (max-width: 1440px) and (max-height: 900px){
        .containner{
            height: 810px;
        }
   }
   @media screen and (max-width: 1366px) and (max-height: 768px){
        .containner{
            height: 810px;
        }
   }
   @media screen and (max-width: 1360px) and (max-height: 768px){
        .containner{
            height: 765px;
        }
   }
   @media screen and (max-width: 1280px) and (max-height: 800px){
        .containner{
            height: 720px;
        }
   }
   /*不符合比例出现空白的处理方法*/
    @media screen and (max-width: 1400px) and (max-height: 1050px){
        .containner{
            height: 944px;
            /*window.innerHeight = 【谷歌:944px】、【火狐:917px】、【IE11:932px】,取做最大值*/
        }
   }
   @media screen and (max-width: 1280px) and (max-height: 918px){
        .containner{
            height: 918px;
        }
   }
   @media screen and (max-width: 1280px) and (max-height: 854px){
        .containner{
            height: 854px;
        }
   }
</style>
<body>
    <div class = "containner">
        <div class = "wrapper">
            <div class="top">导航</div>
            <div class="content">
                <div class="child-top">
                    <div class="chile-one">child-left</div>
                    <div class="chile-two">child-right</div>
                </div>
                <div class="chile-bottom">child-bottom</div>
            </div>
            <div class="bottom">底部</div>
        </div>
    </div>
</body>
</html>
展开阅读全文

没有更多推荐了,返回首页