Question

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

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

我通过使用display：none隐藏元素来隐藏移动网站上的内容，但是所有要做的就是摆脱内容。它仍会填充页面上的某些空间，使我要保留的其他元素的间距表现不佳。

如何使我的其他元素忽略“隐藏的” div？

我曾尝试在Tablet媒体查询中提供.column {width：50％}，但是它所做的只是扩展第3个（隐藏的）列div，从而留下很多死空间。

在这张图片中，您可以看到问题，因为隐藏的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

您遇到的问题源于以下事实：您的列不仅仅隐藏其中的内容。要解决您的问题而无需过多重写，您有两种选择。选项一将第n个子选择器添加到您的列类，并使其不显示，从而允许您使用媒体查询来显示和隐藏该选择器，或者仅向希望隐藏的列中添加新类，并使其不显示display属性然后将其添加到媒体查询中。您要决定要保持多少浏览器兼容性。

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

或

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

下面的代码段在@keyframes上方有第n个子解决方案。希望这会有所帮助

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>

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

1 个答案: