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

#css #html #twitter-bootstrap

#css #HTML #twitter-bootstrap

Вопрос:

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

Это мой код:

 .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 ‘ . Ориентация блоков перепутывается.Но я хочу, чтобы мой результат выглядел так же, как в настройках среды.

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

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

1. Не устанавливайте жесткую ширину. используйте систему столбцов bootstrap для установки ширины, вы уже используете столбцы для смещений, поэтому используйте столбцы для остального

2. на первый взгляд это выглядит так, как будто flexbox или css grids / columns позаботились бы об этом за вас.

Ответ №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>

1. @IvanS95 …… Если я хочу, чтобы что-то внутри элемента 1 полностью вписывалось в него, то какой css я могу использовать?

2. @AshutoshKumar вы бы просто добавили контент и при необходимости просто установили для него width и height значение 100%… Отредактировал ответ, чтобы показать это

Ответ №2:

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

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

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

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