问CSS媒体查询不包装用于桌面版圣杯响应布局的Flexbox容器元素
EN

Stack Overflow用户

提问于 2022-10-04 08:41:16

回答 1查看 46关注 0票数 2

我一直在工作通过一个指导项目，关于古瑟拉创建响应的圣杯布局与CSS Flexbox。我跟得很好，一切都如愿以偿。据我所知，我正在逐字复制视频中的代码。最后，当包括媒体响应性查询时，生成的页面仅显示移动布局(列)，而不像预期的那样更改为包装桌面布局。我甚至在初始问题之后添加了一个viewport标记，但这并没有帮助。我还尝试了在桌面媒体查询(最小宽度为770 px)下包含规则"display: flex;“，尽管视频中没有包含它，所以我删除了它。我试验了每个断点的不同最小值。我还检查了浏览器缩放(在Chrome和Firefox中)是否设置为100%，但无论我如何调整大小，都没有反应。总之，我一直试图复制视频的代码，但不知道为什么我没有得到视频显示的结果，所以我一定是做错了什么。

以下是我的HTML：

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta name=”viewport” content=”width=device-width, initial-scale=1″>
        <meta charset="utf-8">
        <title>Holy Grail Layout</title>
        <link rel="stylesheet" href="holy-grail-practice.css">
    </head>
    <body>
        <div class="flex-container"></div>

            <header class="header">
                <h1>Header</h1>
            </header>

            <aside class="aside left-sidebar">
                <h1>Navigation Bar</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dapibus ultrices in iaculis nunc. At varius vel pharetra vel turpis nunc eget lorem dolor. Auctor urna nunc id cursus metus aliquam. Volutpat lacus laoreet non curabitur gravida arcu ac. Maecenas accumsan lacus vel facilisis volutpat est. Consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis. Fermentum posuere urna nec tincidunt praesent.</p>
                </h1>
            </aside>
            <article class="main">
                <p>
                    <h1>Main Content</h1>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dapibus ultrices in iaculis nunc. At varius vel pharetra vel turpis nunc eget lorem dolor. Auctor urna nunc id cursus metus aliquam. Volutpat lacus laoreet non curabitur gravida arcu ac. Maecenas accumsan lacus vel facilisis volutpat est. Consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis. Fermentum posuere urna nec tincidunt praesent.
                </p>
            </article>
            <aside class="aside right-sidebar">
                <h1>Sidebar</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dapibus ultrices in iaculis nunc. At varius vel pharetra vel turpis nunc eget lorem dolor. Auctor urna nunc id cursus metus aliquam. Volutpat lacus laoreet non curabitur gravida arcu ac. Maecenas accumsan lacus vel facilisis volutpat est. Consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis. Fermentum posuere urna nec tincidunt praesent.</p>
            </aside>
            <footer class="footer">
                <h1>Footer</h1>
            </footer>
            
        </div>
    </body>
</html>

我的CSS：

* {
    padding: 5px;
    margin: 5px;
    border-radius: 20px;
}

body {
    color: black;
    text-align: center;
    line-height: 3;
}

.header {
    background: tomato;
}
.left-sidebar {
    background: yellow;
}
.main {
    background: deepskyblue;
}
.right-sidebar {
    background: hotpink;
}
.footer {
    background: lightgreen;
}

@media all and (min-width: 600px) {
    .flex-container {
        display: flex;
        flex-direction: column;
    }
}

@media all and (min-width: 770px) {
    .flex-container {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .header,
    .footer {
        width: 100%;
    }
    .left-sidebar {
        order: 1;
        flex: 1;
    }
    .main {
        order: 2;
        flex: 2;
    }
    .right-sidebar {
        order: 3;
        flex: 1;
    }
    .footer {
        order: 4;
    }
    
}