html - 我如何在媒体查询中隐藏 HTML 元素？

Question

我目前正在处理三种不同的媒体查询，每一种都有不同的内容量。

移动网站只有一栏包含文本和一个 iframe 视频。 Tablet 媒体查询有两列内容相同。 桌面媒体查询具有三个内容相同的列。

我通过使用 display:none 隐藏元素来隐藏 Mobile 站点上的内容，但是所有这些所做的只是删除内容。它仍然填充页面上的一些空间，使我想保留的其他元素在间距方面表现不佳。

我该怎么做才能让我的其他元素忽略“隐藏”的 div？

我曾尝试在平板电脑媒体查询中提供 .column { width: 50% } 但它所做的只是扩展第 3 个(隐藏的)列 div，留下大量死 Angular 。

在这张图片中您可以看到问题，因为隐藏的 div 仍然占用第二个视频右侧的一​​些空间，导致各种间距问题:

桌面媒体查询上的 div 看起来很完美:

HTML:

 <div class="chan-content">
    <div class="column">
      <div class="column-text">
        <h3 id="hide"> Bla bla bla</h3>
        <p id="hide" class="col-p-shift">
          Bla bla bla
        </p>
      </div>
      <div class="vid-contain vid-anim">
        <iframe src="https://www.youtube.com/embed/momqQl-9-tg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
    <div class="column">
      <div class="column-text">
        <h3 id="hide">Bla bla bla</h3>
        <p id="hide" class="col-p-shift">
          Bla bla bla 
        </p>
      </div>
      <div id="hide" class="vid-contain vid-anim">
        <iframe src="https://www.youtube.com/embed/xAngb0wRZJM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
    <div class="column">
      <div class="column-text">
        <h3 id="hide-desktop"> Bla bla bla</h3>
        <p id="hide-desktop" class="col-p-shift">
          Bla bla bla
        </p>
      </div>
      <div id="hide-desktop" class="vid-contain vid-anim">
        <iframe src="https://www.youtube.com/embed/YrwxZcsKIJU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
  </div>

CSS:

body  {
  font-size: 1em;
  font-family: 'Cabin', sans-serif;
  background: black;
  color: white;
}

.container  { /* Mobile */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px 340px 1fr 50px;
  grid-template-areas:
    "header"
    "advert"
    "main"
    "footer";
  text-align: center;
}

header  {
  grid-area: header;
  display: flex;
  flex-flow: wrap;
  flex: 0 1 auto;
  justify-content: space-evenly;
  align-items: center;
  padding: 5px 0 15px 0;
  font-size: 1.3em;
}

main  {
  grid-area: main;
}

advert  {
  grid-area: advert;
  background: url(./mi-vr-5.jpg);
}

footer  {
  grid-area: footer;
  margin: 1em 0 0 0;
}

.title  {
  font-size: 3em;
}

.title-shift  {
  margin: 90px 0 0 0;
}

.title-shift-h3  {
  transform: translate(0, -25px)
}

.title-shift-p  {
  transform: translate(0, 15px)
}

.text-style  {
  background: -webkit-linear-gradient(80deg, white, #AEC6DF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.channel  {
  display: flex;
  justify-content: space-evenly;
  font-size: 1em;
}

.chan-img  {
  width: 160px;
  height: 40px;
  border-radius: 5px;
  transition: 1s;
}

.chan-img:hover  {
  transform: scale(1.1);
  transition: 1s;
}

.chan-content {
  display: flex;
  position: relative;
  width: 100%;
  padding-bottom: 56%;
  margin: 8px 0 0 0;
}

iframe  {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
}

.line  {
  width: 100%;
  border-top: 2px solid white;
  opacity: 0.3;
}

a  {
  color: white;
}

img  {
  margin: 10px 0 0 0;
  object-fit: cover;
  width: 100%;
  height: 100px;
}

.bot-bar  {
  display: flex;
  flex-flow: wrap;
  flex: 0 1 auto;
  justify-content: space-evenly;
  align-items: center;
  padding: 0 0 1em 0;
  font-size: 0.8em;
}

.bot-bar > a {
  color: white;
}

.bot-bar > a > img  {
  width: 20px;
  height: 20px;
  transition: 0.7s;
}

.bot-bar > a > img:hover  {
  transition: 0.7s;
  transform: scale(1.3);
}

#hide  {
  display: none;
}

#hide-desktop  {
  display: none;
}

form  {
  margin: 20px 0 0 0;
}

.input-div  {
  margin: 20px 0 20px 0;
}

input  {
  border: 1px solid white;
  border-radius: 5px;
  background: black;
  padding: 0 5px 0 5px;
}

textarea  {
  border: 1px solid white;
  border-radius: 5px;
  background: black;
  padding: 0 5px 0 5px;
}

.bg-righttoleft {
  -webkit-animation: bg-righttoleft 3s ease-in-out;
  background-position: 50% 75%;
  background-size: 1000px;
}

.righttoleft  {
  animation-name: righttoleft;
  animation-duration: 3s;
}

.lefttoright  {
  animation-name: lefttoright;
  animation-duration: 3s;
}

.vid-anim  {
  animation-name: lefttoright;
  animation-duration: 3s;
}

@keyframes bg-righttoleft {
  0% {
    background-position: 20% 75%;
    opacity: 0;
  }
  100% {
    background-position: 50% 75%;
  }
}

@keyframes opacity {
  0%  {
    opacity: 0;
  }
  100%  {
    opacity: 1;
  }
}

@keyframes righttoleft {
  0%  {
    transform: translateX(100%);
    opacity: 0;
  }
  100%  {
    transform: translateX(0);
  }
}

@keyframes lefttoright {
  0%  {
    transform: translateX(-100%);
    opacity: 0;
  }
  100%  {
    transform: translateX(0);
  }
}

@media only screen /* Tablet */
  and (min-width: 885px) {
    .container  {
      grid-template-columns: 1fr;
      grid-template-rows: 50px 340px 1fr 50px;
      grid-template-areas:
      "header"
      "advert"
      "main"
      "footer";
    }

    body  {
      font-size: 1.2em;
    }

    header  {
      font-size: 1.4em;
    }

    advert  {
      background-repeat: no-repeat;
      font-size: 0.9em;
    }

    .title-shift-p  {
      transform: translate(0, -5px);
    }

    .channel  {
      justify-content: center;
      align-content: center;
    }

    .chan-text  {
      transform: translate(0, 18px);
      margin: 0 20px 0 40px;
    }

    .chan-content  {
      display: flex;
      position: relative;
      flex: 0 1 auto;
      padding-bottom: 0%;
      background: green;
    }

    .column  {
      display: flex;
      flex-direction: column;
      margin: 0 10px 0;
      background: yellow;
    }

    .vid-contain  {
      position: relative;
      overflow: hidden;
      padding-bottom: 56%;
    }

    .column-text  {
      min-height: 320px;
    }

    iframe  {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }

    .bot-bar  {
      font-size: 0.8em;
      margin: 20px 0 0 0;
    }

    img  {
      margin: 10px 0 0 0;
      object-fit: cover;
      width: 50%;
      height: 200px;
    }

    .vid-anim  {
      animation-name: opacity;
      animation-duration: 6s;
    }

    .bg-righttoleft {
      background-size: 2000px;
      background-position: 50% 50%;
    }

    @keyframes bg-righttoleft {
      0% {
        background-position: 0% 50%;
        opacity: 0;
      }
      100% {
        background-position: 50% 50%;
      }
    }

    #hide  {
      display: block;
    }

    #hide-desktop  {
      display: none;
    }
  }

@media screen /* Desktop/Laptop */
  and (min-width: 1900px) {
    .container  {
      max-width: 2500px;
      grid-template-columns: 250px 1fr;
      grid-template-rows: 50px 340px 1fr 50px;
      grid-template-areas:
      "header header"
      "sidebar advert"
      "sidebar main"
      "footer footer";
    }

    sidebar  {
      background: url(./history-vr-banner.jpg);
    }

    .bot-bar  {
      font-size: 0.8em;
    }

    .column  {
      width: 33.3%
    }

    .column-text  {
      min-height: 310px;
      padding: 20px 0 0 0;
    }

    #hide-desktop  {
      display: block;
    }
  }

Answer 1

您遇到的问题源于这样一个事实，即您的专栏不仅隐藏了其中的内容。要在不重写太多的情况下解决您的问题，您有两种选择。选项一向您的列类添加一个 nth-child 选择器并为其显示无，允许您使用媒体查询显示和隐藏它，或者简单地向您希望隐藏的列添加一个新类并为其提供显示无属性然后将其添加到媒体查询中。根据您希望维护的浏览器兼容性做出多少决定。

.column:nth-child(3) {
    display: none;
}

或

.column.hide-mobile {
    display: none;
}

下面代码片段中的第 n 个子解决方案就在您的@keyframes 之上。希望这有帮助

body {
  font-size: 1em;
  font-family: 'Cabin', sans-serif;
  background: black;
  color: white;
}

.container {
  /* Mobile */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px 340px 1fr 50px;
  grid-template-areas: "header" "advert" "main" "footer";
  text-align: center;
}

header {
  grid-area: header;
  display: flex;
  flex-flow: wrap;
  flex: 0 1 auto;
  justify-content: space-evenly;
  align-items: center;
  padding: 5px 0 15px 0;
  font-size: 1.3em;
}

main {
  grid-area: main;
}

advert {
  grid-area: advert;
  background: url(./mi-vr-5.jpg);
}

footer {
  grid-area: footer;
  margin: 1em 0 0 0;
}

.title {
  font-size: 3em;
}

.title-shift {
  margin: 90px 0 0 0;
}

.title-shift-h3 {
  transform: translate(0, -25px)
}

.title-shift-p {
  transform: translate(0, 15px)
}

.text-style {
  background: -webkit-linear-gradient(80deg, white, #AEC6DF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.channel {
  display: flex;
  justify-content: space-evenly;
  font-size: 1em;
}

.chan-img {
  width: 160px;
  height: 40px;
  border-radius: 5px;
  transition: 1s;
}

.chan-img:hover {
  transform: scale(1.1);
  transition: 1s;
}

.chan-content {
  display: flex;
  position: relative;
  width: 100%;
  padding-bottom: 56%;
  margin: 8px 0 0 0;
}

iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
}

.line {
  width: 100%;
  border-top: 2px solid white;
  opacity: 0.3;
}

a {
  color: white;
}

img {
  margin: 10px 0 0 0;
  object-fit: cover;
  width: 100%;
  height: 100px;
}

.bot-bar {
  display: flex;
  flex-flow: wrap;
  flex: 0 1 auto;
  justify-content: space-evenly;
  align-items: center;
  padding: 0 0 1em 0;
  font-size: 0.8em;
}

.bot-bar>a {
  color: white;
}

.bot-bar>a>img {
  width: 20px;
  height: 20px;
  transition: 0.7s;
}

.bot-bar>a>img:hover {
  transition: 0.7s;
  transform: scale(1.3);
}

#hide {
  display: none;
}

#hide-desktop {
  display: none;
}

form {
  margin: 20px 0 0 0;
}

.input-div {
  margin: 20px 0 20px 0;
}

input {
  border: 1px solid white;
  border-radius: 5px;
  background: black;
  padding: 0 5px 0 5px;
}

textarea {
  border: 1px solid white;
  border-radius: 5px;
  background: black;
  padding: 0 5px 0 5px;
}

.bg-righttoleft {
  -webkit-animation: bg-righttoleft 3s ease-in-out;
  background-position: 50% 75%;
  background-size: 1000px;
}

.righttoleft {
  animation-name: righttoleft;
  animation-duration: 3s;
}

.lefttoright {
  animation-name: lefttoright;
  animation-duration: 3s;
}

.vid-anim {
  animation-name: lefttoright;
  animation-duration: 3s;
}

.column:nth-child(3) {
  display: none;
}

@keyframes bg-righttoleft {
  0% {
    background-position: 20% 75%;
    opacity: 0;
  }
  100% {
    background-position: 50% 75%;
  }
}

@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes righttoleft {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes lefttoright {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
}

@media only screen
/* Tablet */

and (min-width: 885px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 50px 340px 1fr 50px;
    grid-template-areas: "header" "advert" "main" "footer";
  }
  body {
    font-size: 1.2em;
  }
  header {
    font-size: 1.4em;
  }
  advert {
    background-repeat: no-repeat;
    font-size: 0.9em;
  }
  .title-shift-p {
    transform: translate(0, -5px);
  }
  .channel {
    justify-content: center;
    align-content: center;
  }
  .chan-text {
    transform: translate(0, 18px);
    margin: 0 20px 0 40px;
  }
  .chan-content {
    display: flex;
    position: relative;
    flex: 0 1 auto;
    padding-bottom: 0%;
    background: green;
  }
  .column {
    display: flex;
    flex-direction: column;
    margin: 0 10px 0;
    background: yellow;
  }
  .vid-contain {
    position: relative;
    overflow: hidden;
    padding-bottom: 56%;
  }
  .column-text {
    min-height: 320px;
  }
  iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
  .bot-bar {
    font-size: 0.8em;
    margin: 20px 0 0 0;
  }
  img {
    margin: 10px 0 0 0;
    object-fit: cover;
    width: 50%;
    height: 200px;
  }
  .vid-anim {
    animation-name: opacity;
    animation-duration: 6s;
  }
  .bg-righttoleft {
    background-size: 2000px;
    background-position: 50% 50%;
  }
  @keyframes bg-righttoleft {
    0% {
      background-position: 0% 50%;
      opacity: 0;
    }
    100% {
      background-position: 50% 50%;
    }
  }
  #hide {
    display: block;
  }
  #hide-desktop {
    display: none;
  }
  
}

@media screen
/* Desktop/Laptop */

and (min-width: 1900px) {
  .container {
    max-width: 2500px;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 50px 340px 1fr 50px;
    grid-template-areas: "header header" "sidebar advert" "sidebar main" "footer footer";
  }
  sidebar {
    background: url(./history-vr-banner.jpg);
  }
  .bot-bar {
    font-size: 0.8em;
  }
  .column {
    width: 33.3%
  }
  .column-text {
    min-height: 310px;
    padding: 20px 0 0 0;
  }
  #hide-desktop {
    display: block;
  }
  .column:nth-child(3) {
      display: flex;
   }
}

<div class="chan-content">
  <div class="column">
    <div class="column-text">
      <h3 id="hide">A comprehensive view of the Oculus Go</h3>
      <p id="hide" class="col-p-shift">
        This review is an extensive and in-depth insight into the pros and cons of owning an Oculus Go over the alternatives. At a much lower price point than the Oculus Rift, the Go has a few drawbacks. <br><br>No Oled display, no headphones and no space
        positioning. However, the resolution on the go is higher than the Rift giving a clearer, cleaner image. Perfect for media consumption.
      </p>
    </div>
    <div class="vid-contain vid-anim">
      <iframe src="https://www.youtube.com/embed/momqQl-9-tg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
  <div class="column">
    <div class="column-text">
      <h3 id="hide">An in-detail talk about the Oculus Quest</h3>
      <p id="hide" class="col-p-shift">
        After an explanation of the latest hardware Oculus intend on releasing Adam Savage Tested have a chat with Product Manager Sean Liu about the hardware inside the up and coming Oculus Quest. <br><br>The Quest will receive a resolution upgrade to
        1440-1600 whilst keeping the Oled colours Rift owners love as well as making sensors redundant with sensors built into the headset. Oh, and it's cordless!
      </p>
    </div>
    <div id="hide" class="vid-contain vid-anim">
      <iframe src="https://www.youtube.com/embed/xAngb0wRZJM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
  <div class="column">
    <div class="column-text">
      <h3 id="hide-desktop">Chronos is a unique third-person experience</h3>
      <p id="hide-desktop" class="col-p-shift">
        Created by Oculus, Chronos is another take on what can be achieved with VR technology. The game is a third-person, room-based RPG with stunning 3D visuals and well-designed combat mechanics.
        <br><br>The concept is also original. As your character dies throughout the game he advances in age shuffling his abilities from melee combat to magic. Chronos is a therapeutic gaming experience that should not be missed!
      </p>
    </div>
    <div id="hide-desktop" class="vid-contain vid-anim">
      <iframe src="https://www.youtube.com/embed/YrwxZcsKIJU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
</div>