我试图在Codepen中建立一个响应式的两栏式布局,但效果很好。布局非常简单,由youtube视频和一些文字组成。

但是,当我尝试在自己的网站上实施该代码时,该代码无法正常工作。在这里,希望我的代码可以帮助我:

<!DOCTYPE html>
<html>
<head>
  <style>
  .flex-container {
    gap: 10px;
    @media (min-width: 56.25em){
      display: flex;
    }
  }

  .main-content {
    flex: 1;
    width: 100%;
  }

  .sidebar {
    flex: 1;
  }

  .videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }
  .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  </style>
</head>
<body>
  <main class="flex-container">
    <section class="main-content">
      <h2>Sidebar</h2>
      <div class="videoWrapper"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/eX2qFMC8cFo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    </section>

    <aside class="sidebar">
      <h2>Main Content</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam placeat cumque exercitationem vitae nisi tenetur delectus praesentium doloremque, quibusdam nemo maxime laudantium et possimus pariatur doloribus excepturi. Veritatis ex numquam inventore odit dolorum mollitia dolorem, itaque atque non ratione molestias a repellat ullam corporis quisquam ipsa sit iure tempore nulla.
      </p>
   </aside>
  </main>
</body>
</html>
当我在Chrome Inspector中检查代码时,它清楚地显示出命令“ display:flex;”。无法正常工作,但我不知道为什么,也找不到解决方案。

除非您使用CSS预处理程序(如SASS或LESS),否则不能将媒体查询嵌套在特定选择器的“主规则”内。在您的屏幕快照中,您可以看到浏览器@media (min-width: 56.25em){通过在末尾添加分号来尝试将媒体查询的第一行解释为单独的规则;,这是行不通的。

因此,您必须分别在媒体查询中使用相同的CSS选择器分别编写主规则和媒体查询:

.flex-container {
  gap: 10px;
  
}
@media (min-width: 56.25em) {
   .flex-container {
     display: flex;
  }
}