适用所有设备的响应式布局 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="19.4.1 -- 适应所有设备的响应式布局.css"> -->
    <style>
        * {
            padding: 0;
            margin: 0%;
        }
        /* PC版 */
        
        #big {
            width: 90%;
            margin: auto;
        }
        
        #head {
            width: 100%;
            margin: auto;
            height: 40px;
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
            /* border: 1px solid red; */
        }
        
        .head_left {
            width: 60%;
            background-color: #26424c;
        }
        
        .head_right {
            width: 30%;
            background-color: #26424c;
        }
        
        #body {
            height: 300px;
            background-color: #126c75;
            text-align: center;
            color: #fff;
            line-height: 300px;
            font-size: 50px;
            margin-top: 30px;
        }
        
        #body_buttom {
            height: 200px;
            /* border: 1px solid pink; */
            margin-top: 30px;
            display: flex;
        }
        
        #body_buttom div {
            height: 200px;
            background-color: violet;
            margin-left: 20px;
            flex: auto;
            font-size: 50px;
            text-align: center;
            color: #fff;
            line-height: 200px;
        }
        
        #body_buttom div:nth-child(1) {
            margin-left: 0;
            background-color: #429d84;
        }
        
        #body_buttom div:nth-child(2) {
            background-color: #ac3110;
        }
        
        #body_buttom div:nth-child(3) {
            background-color: #635e57;
        }
        
        #body_buttom div:nth-child(4) {
            background-color: #9e4e11;
        }
        /* ipad版 */
        
        @media screen and (min-width:760px) and (max-width:1000px) {
            #head {
                height: 60px;
            }
            #body {
                height: 300px;
                line-height: 300px;
            }
            #body_buttom {
                height: auto;
                width: 100%;
                /* border: 1px solid red; */
                flex-wrap: wrap;
            }
            #body_buttom div {
                width: 45%;
                height: 250px;
                line-height: 250px;
                margin-left: 20px;
            }
            #body_buttom div:nth-child(3) {
                margin-left: 0;
            }
            #body_buttom div:nth-child(3),
            #body_buttom div:nth-child(4) {
                margin-top: 20px;
            }
        }
        /* APP版 */
        
        @media screen and (max-width:420px) {
            #head {
                height: 40px;
            }
            #body {
                height: 250px;
                line-height: 250px;
            }
            #body_buttom {
                height: auto;
                width: 100%;
                /* border: 1px solid red; */
                flex-wrap: wrap;
            }
            #body_buttom div {
                width: 100%;
                height: 250px;
                line-height: 250px;
                /* margin-left: 20px; */
                margin-top: 10px;
                margin-bottom: 20px;
            }
            /* #body_buttom div:nth-child(1) {
        margin-top: 0px;
    } */
            #body_buttom div:nth-child(2),
            #body_buttom div:nth-child(3),
            #body_buttom div:nth-child(4) {
                margin-left: 0;
            }
        }
        /* APP版横屏 */
        
        @media screen and (orientation:landscape) and (max-width:667px) {
            #body {
                height: 100px;
                line-height: 100px;
            }
            #body_buttom {
                height: auto;
                width: 100%;
                /* border: 1px solid red; */
                flex-wrap: wrap;
            }
            #body_buttom div {
                width: 24%;
                height: 130px;
                line-height: 130px;
                margin-left: 20px;
            }
            #body_buttom div:nth-child(4) {
                flex: none;
                width: 31%;
                margin-left: 0;
                margin-top: 20px;
            }
        }
    </style>
</head>

<body>
    <div id="big">
        <div id="head">
            <div class="head_left"></div>
            <div class="head_right"></div>
        </div>

        <div id="body"></div>

        <div id="body_buttom">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>

</html>

　　

 

posted @ 2022-03-22 19:44  33的男孩  阅读(48)  评论(0)    收藏  举报