我正在学习媒体查询以及为什么这个媒体查询不起作用。这是我的完整代码,谢谢:)
我的html:
</head>
<body>
<div class="container">
<div class="red">Red Lorem, ipsum dolor</div>
<div class="orange">Orange</div>
<div class="yellow">Yellow</div>
<div class="green">Green</div>
<div class="blue">Blue</div>
<div class="indigo">Indigo</div>
<div class="purple">Purple</div>
</div>
</body>
</html>
我的CSS:
<style>
.container {
color: white;
display: inline-flex ;
flex-direction: row;
border: 2px solid green;
flex: wrap;
flex:1;
font-size: 2rem;
}
@media (min-wdith:600px){
.container{
flex-direction:column;
}
}
.container * {
flex-shrink: 1;
}
/*
Select all the elements that are the direct
children of the .container class.
*/
.red {background-color: #eb4d4b;}
.orange {background-color: #f0932b;}
.yellow {background-color: #f6e58d;}
.green {background-color: #6ab04c;}
.blue {background-color: #4834d4;}
.indigo {background-color: #30336b;}
.purple {background-color: #be2edd;}
</style>
我按照教程进行操作,并确保我的语法正确,我希望当我在 VS 上缩小和展开屏幕时,我的元素能够以 600px 的最小宽度从 Flex 行移动到 Flex 列
宽度拼写中有一个小错别字。
将
@media (min-wdith:600px){
替换为 @media (min-width:600px){