尽管检查语法,媒体查询仍无法正常工作

问题描述 投票:0回答:1

我正在学习媒体查询以及为什么这个媒体查询不起作用。这是我的完整代码,谢谢:)

我的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 列

css mediaquery
1个回答
0
投票

宽度拼写中有一个小错别字。

@media  (min-wdith:600px){
替换为
@media (min-width:600px){

© www.soinside.com 2019 - 2024. All rights reserved.