Как правильно использовать медиа-запрос для достижения этого результата?

Question

Я хочу создать адаптивную веб-страницу, используя Angular 6. Я пытался сделать это с помощью начальной загрузки, но с треском провалился. В итоге я решил пойти с медиа-запросом.

Это мой код:

.width {
  width: 300px;
  height: 300px;
  display: inline-block;
  border: 1px solid blue;
}

.width1 {
  width: 800px;
  height: 300px;
  border: 1px solid blue;
  display: inline-block;
}

@media only screen and (max-width: 600px) {
  .width {
    background-color: black;
    width: 200px;
    height: 100px;
  }
  .width1 {
    width: 500px;
  }
}

<div class="container-fluid ">
  <div class="row">
    <div class="badge width col-md-offset-1  col-lg-offset-1 col-xl-offset-1">
      Hello I am in component 1.
    </div>

    <div class="badge width  col-md-offset-1 col-lg-offset-1 col-xl-offset-1">
      Hello I am in component2.
    </div>

    <div class="badge width  col-md-offset-1 col-lg-offset-1 col-xl-offset-1">
      Hello I am in component3.
    </div>
  </div>

  <br>
  <br>
  <br>

  <div class="row">
    <div class="badge width  col-md-offset-1 col-lg-offset-1 col-xl-offset-1">
      Hello I am in component 4.
    </div>

    <div class="badge width1 col-md-offset-1 col-lg-offset-1 col-xl-offset-1">
      Hello I am in component 5.
    </div>
  </div>
</div>

Результат, который я получаю для среднего экрана, приведен ниже, и это результат, который я хочу:

Однако проблема возникает, когда я пытаюсь увеличить разрешение браузера с помощью «CTRL +».Ориентация блоков поменяется. Но я хочу, чтобы мой результат выглядел так же, как в средних настройках.

Ниже приведен скриншот с результатом на больших экранах.

Как это исправить?

Answer 1

Я думаю, что то, что вам нужно сделать, лучше достигается с помощью CSS Grid , это позволит вам создать макет с несколькими правилами и практически без медиазапросов (если вы хотите, чтобы макет был точно таким жевсе время) ... посмотрите на это:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(200px, auto);
  grid-gap: 20px;
}

.grid-item {
  border: 1px solid;
}

.item5 {
  grid-column: span 2;
}

section {
  background-color: blue;
  height: 100%;
  color: #FFF;
}

<div class="grid-container">
  <div class="grid-item item1">
    <section>
      Inner Section
    </section>
  </div>
  <div class="grid-item item2">Item 2</div>
  <div class="grid-item item3">Item 3</div>
  <div class="grid-item item4">Item 4</div>
  <div class="grid-item item5">Item 5</div>
</div>

Answer 2

Я думаю, что проблема, с которой вы сталкиваетесь, заключается в использовании Ctrl + в надежде увеличить ширину вашего браузера. Ctrl + предназначено только для увеличения текста в целях доступности.

Чтобы эффективно управлять шириной браузера / области просмотра в Chrome, щелкните правой кнопкой мыши свою страницу и выберите Inspect. С открытой панелью проверки окно вашего браузера теперь будет иметь width x height в правом верхнем углу страницы.

Что касается вашего кода, я не могу воспроизвести результат в первом отправленном вами изображении (его CSS явно отличается от предоставленного фрагмента).

Чтобы сделать эту работу так, как вы хотите, я бы посоветовал заглянуть в Flexbox , он относительно новый и довольно мощный, поэтому его обязательно стоит изучить.