没有空间时隐藏的响应元素答案

【问题标题】：Responsive elements hidden when no space没有空间时隐藏的响应元素
【发布时间】：2019-02-22 12:22:34
【问题描述】：

我真的不知道具体写什么。我有 4 个宽度为 300 像素的框，如果文档宽度是（我不知道可能）600 像素，那么 2 个框应该留在页面上，其他的应该隐藏。

有没有办法让它动态化？也许js或jquery？希望你能帮我解决这个问题！ ^^

这是我现在拥有的。

HTML

<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>
     <body>
    <article class='Conteiner' id='howItWorks'>
            <section class='Conteiner-Highlight howItWorks-Highlight'>Jak to działa?</section>
        <section class='Steps'>
          <section class='step'><div class='digit'>1</div><span class='digit-description'>Analizujemy <br> potrzeby klienta</span></section>

          <section class='step_hidden'><div class='digit'>2</div><span class='digit-description'>Tworzymy <br> projekt graficzny</span></section>

          <section class='step_hidden'><div class='digit'>3</div><span class='digit-description'>Przedstawiamy <br> propozycję klientowi</span></section>

          <section class='step_hidden'><div class='digit'>4</div><span class='digit-description'>Przystępujemy <br> do pisania strony</span></section>
        </section>
          <section class='steps-Controls'>
          <span class='steps_check'>
          <i class='material-icons'>radio_button_checked</i>
          <i class='material-icons'>radio_button_unchecked</i>
          <i class='material-icons'>radio_button_unchecked</i>
          <i class='material-icons'>radio_button_unchecked</i>
          </span>
          <span class='steps_arrows'>
            <span class='step_arrow' id='step_arrow_left'><i class='material-icons'>keyboard_arrow_left</i></span>
            <span class='step_arrow' id='step_arrow_right'><i class='material-icons'>keyboard_arrow_right</i></span>
          </span>
        </section>
    </article>
  </body>
</html>

SCSS

:root{
  --red: rgb(231,76,77);
  --white: rgb(242,241,244);
  --darker-blue: rgb(14,60,91);
}

*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}
html, body{
  width: 100%;
  height: 100vh;
  color: #0E3C5B;
  font-size: 16px;

}
/* Modern browsers */
@media screen and (min-width: 25em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
/* Safari <8 and IE <11 */
@media screen and (min-width: 25em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
@media screen and (min-width: 50em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

.Conteiner-Highlight{
  width: 100%;
  height: 100px;

  font-family: Roboto;
  font-weight: 900;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px auto;
  font-size: 1.2rem;

}
.Conteiner{
  width: 100%;
  min-height: 1000px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-bottom: 1px solid rgb(14,60,91);

}
#howItWorks{

  .Steps{
    width: 80%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row;

    .step , .step_hidden{
      max-width: 300px;
      width: 80%;
      max-height: 500px;
      height: 60vh;

      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      box-shadow: 0px 4px 10px rgba(144,144,144,.5);
      margin: 0 50px;
      border-bottom: 10px solid rgb(231,76,77);
      padding: 10px;
      transition: all .3s ease-in-out;
      opacity: 1;


      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .digit{
        height: 40%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3rem;
        font-family: Roboto;
        font-weight: 900;
        color: rgb(231,76,77);
      }
      .digit-description{
        height: 30%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: .5rem;
        font-family: Raleway;
        font-weight: 400;
      }
    }

    .step_hidden{
      opacity: .3;
    }

    .arrow{
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;

    }
  }
  .steps-Controls{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    margin: 50px 0;

    .steps_arrows{
      display: flex;
      flex-flow: row;
      margin: 10px 0;
      cursor:pointer;

      .step_arrow{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 35px;
        height: 35px;
        margin: 0 10px;
        background-color: var(--red);

          i{
            color: var(--white);
          }
      }
    }
    .steps_check{
      display: flex;
      flex-flow: row;
      cursor:pointer;
          i{
            font-size: .4rem;

          }
    }
  }
}

CodePen

【问题讨论】：

请给我们你的代码，你想要的图片是不够的
使用媒体查询。
您可以使用 jquery 代码检查宽度，并在此基础上隐藏其他框
无JS无jquery，固定高度并添加溢出隐藏下一行元素

标签： javascript jquery css dynamic responsive

【解决方案1】：

有几种方法可以做到这一点。

您可以让这些元素的 css 容器不包装，因此如果没有足够的空间，它们就无法通过窗口大小显示。在这种情况下，当您调整窗口大小时可能会看到 2 + 1/2 个元素，因为它们会逐渐“消失”。

另一种解决方案就是使用 javascript。您可以编写一个在每个调整大小事件上触发的函数，并编写一个 if 条件，当窗口大小变得太小时，这些元素的可见性被隐藏。

对于这两种解决方案，都有大量示例和文档，因此我建议您搜索这些并选择一个易于理解并适合您的情况的解决方案。

编辑：由于您提出了其他问题：如果您只根据整个视口大小做出决定，那么您可以使用@media-queries。如果您不依赖于视口而是依赖于一些外部 html 元素和布局，则不能使用它们。

【讨论】：

我会尝试媒体查询，谢谢你的描述！

【解决方案2】：

您可以通过媒体查询来实现这一点。如果你展开 sn-p 你可以看到所有其他隐藏的框。

.container{
  display: flex;
  flex-direction : row;
}
.container .box{
  margin: 5px;
  background-color : #333;
  width : 50px;
  height: 50px;
}

@media screen and ( max-width: 982px ) {
  .container .box:not(:first-of-type){
    display:none;
  }
}

<div class="container">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>

根据您的代码示例： https://codepen.io/anon/pen/EeOgxE

【讨论】：

【解决方案3】：

我真的不知道到底（要）回复什么；）

您可以完全跳过脚本并使用 CSS，假设每个框是 300 像素宽和 600 像素组合，您可以执行以下操作：

/* Showing 2 */
@media (min-width: 600px) 
{
    .my-container-with-four-boxes {
         width: 600px;
         height: 300px;
         overflow: hidden;
    }
}

/* Showing 3 */
@media (min-width: 900px) 
{
    .my-container-with-four-boxes {
         width: 900px;
         height: 300px;
         overflow: hidden;
    }
}

/* Showing 4 */
@media (min-width: 1200px) 
{
    .my-container-with-four-boxes {
         width: 1200px;
         height: 300px;
    }
}

您可能必须使用填充或此处未提及的其他内容来调整屏幕限制和容器大小；)

【讨论】：

谢谢，我只是觉得有更好的方法，比如媒体查询，但是你们都建议我使用这个，我会这样做的！ ^^