Отзывчивые элементы скрыты, когда нет места - PullRequest
Новая
       7

Отзывчивые элементы скрыты, когда нет места

0 голосов
/ 18 сентября 2018

Я действительно не знаю, что именно пишу.У меня есть 4 поля шириной 300px, если ширина документа (я не знаю, может быть) 600px, тогда 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

Ответы [ 3 ]

0 голосов
/ 18 сентября 2018

Вы можете достичь этого с помощью медиа-запросов. если вы развернете фрагмент, вы увидите все остальные скрытые поля. 

.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

0 голосов
/ 18 сентября 2018

Я действительно не знаю, что именно (чтобы) ответить;)

Вы можете полностью пропустить сценарий и использовать 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;
    }
}

Возможно, вам придется настроить ограничения экрана и размеры контейнера с помощью отступов или чего-то еще, не упомянутого здесь;)

0 голосов
/ 18 сентября 2018

Есть несколько способов сделать это.

Вы можете просто сделать css-контейнер этих элементов неупаковывающимся, поэтому, если не хватает места, они просто не видны из-за размера окна,В этом сценарии можно увидеть 2 + 1/2 элемента при изменении размера окна, потому что они постепенно исчезают.

Другое решение - просто использовать javascript.Вы можете написать функцию, которая запускается для каждого события resize, и написать условие if, в котором видимость этих элементов скрыта, когда размер окна становится слишком маленьким.

Для обоих решений есть множество примеров идокументации, так что я бы просто предложил вам найти и выбрать ту, которая будет понятна для вас и подходит для вашей ситуации.

edit: Так как появились другие комментарии по вашему вопросу: если вы толькорешение, основанное на размере всего окна просмотра, то вы можете использовать @media -запросы.Вы не можете использовать их, если вы зависите не от области просмотра, а от какого-то внешнего html-элемента и макета.

...