我一直在做一个关于Coursera的指导性项目，用CSS Flexbox创建响应性的圣杯布局.我跟得很好，一切都像预期的那样.据我所知，我是从视频中逐字复制代码的.最后，当包括对响应性的媒体查询时，结果页面仅显示移动布局(列)，而不会如预期的那样更改为包装桌面布局.我甚至在最初的问题之后添加了一个视窗元标记，但这并没有帮助.我还try 在桌面媒体查询(最小宽度为770px的那个)下添加规则"Display:flex；"，但这并不包括在视频中，所以我删除了它.我已经 for each 断点试验了不同的最小值.我还判断了浏览器的zoom (Chrome和Firefox)是否设置为100%，但无论我如何调整大小，都没有任何react .简而言之，我一直试图复制视频的代码，但找不到为什么我没有得到视频显示的结果，所以我一定是做错了什么.
以下是我的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;
}
}