使用“弹性盒布局和媒体查询”实现一个响应式布局

灰太狼 2024-04-22 22:14 72阅读 0赞

要求实现如下布局：

当屏幕宽度大于640时 显示如下

![602b2ba38e834f8a883a50df960692e4.png][]

当屏幕宽度小于640时 显示如下

![315e60c3bb21471288067a54fbc19c46.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>弹性盒</title>
        <style>
            body{
                font: 24px;
                background-color:powderblue
            }
            .box {
                min-height: 500px;
                margin: 0px;
                padding: 0px;
                display: flex;
                flex-flow: row;
                
            }
            .box > nav {
                margin: 0px;
                padding: 5px;
                border-radius: 7pt;
                background: palegreen;
                border:solid 2px brown;
                order: 1;
                flex: 1;
            }
            .box > article {
                margin: 0px;
                padding: 5px;
                border-radius: 7pt;
                background:palevioletred;
                border:solid 2px brown;
                order: 2;
                flex: 3;
            }
            .box > aside {
                margin: 0px;
                padding: 5px;
                border-radius: 7pt;
                background: palegreen;
                border:solid 2px brown;
                order: 3;
                flex: 1;
            }
            header,footer{
                display: block;
                margin: 0;
                padding: 5px;
                background-color:palegoldenrod;
                border-radius: 7pt;
                border:solid 2px brown;
                min-height: 100px;
            }
            @media all and (max-width: 640px){
                .box{
                    flex-flow: column;
                }
                .box > nav,aside,article{
                    order: 0;
                }
                .box > nav,aside,header,footer{
                    min-height: 50px;
                    max-height: 50px;
                }
            }
        </style>
    </head>
    <body>
       
        <header>header</header>
        <div class="box">
        <nav>nav</nav>
        <aside>aside</aside>
        <article>article</article>
        </div>
        <footer>footer</footer>
    </body>
    </html>

[602b2ba38e834f8a883a50df960692e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/6bcee22e6dde4f3badb52310db65e4f4.png
[315e60c3bb21471288067a54fbc19c46.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/99ae4120604440dcb29c10cc1c654778.png