1

Здравствуйте. У меня структура постов: 4 маленьких и 2 больших, а затем 4 маленьких, 1 большой и 2 маленьких. Дело в том, что я не знаю что и на каких разрешениях экрана писать в медиа-запросы. Я не понимаю что мне нужно уменьшить или увеличить.

На разрешении с 974 до 730 вёрстка ломается. Шаблон верстаю сам для себя. К нему не прилагалось как и что должно выглядеть на 768, 480 и 320.

До 768 у меня не получается, чтобы стояло 4 маленьких потом 2 больших, а затем 4 маленьких, 1 большой и 2 маленьких.

Мой кривой код

.news {
  max-width: 980px;
  min-height: 500px;
  background-color: gray;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.postSmall {
  flex-basis: 210px;
  height: 266px;
  background-color: #fff;
  display: inline-block;
  margin: 17px;
}
.postBig {
  flex-basis: 455px;
  height: 266px;
  background-color: #fff;
  display: inline-block;
  margin: 17px;
}
/* Custom, iPhone Retina */

@media only screen and (min-width: 320px) {}
/* Extra Small Devices, Phones */

@media only screen and (min-width: 480px) {}
/* Small Devices, Tablets */

@media only screen and (min-width: 768px) {}
/* Medium Devices, Desktops */

@media only screen and (min-width: 992px) {}
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<section class="news">
  <div class="postSmall"></div>
  <div class="postSmall"></div>
  <div class="postSmall"></div>
  <div class="postSmall"></div>
  <div class="postBig"></div>
  <div class="postBig"></div>
  <div class="postSmall"></div>
  <div class="postSmall"></div>
  <div class="postSmall"></div>
  <div class="postSmall"></div>
  <div class="postBig"></div>
  <div class="postSmall"></div>
  <div class="postSmall"></div>
</section>

А с 768 вот так:

введите сюда описание изображения

Подскажите что делать? Вот сама проблема:

введите сюда описание изображения

2 ответа 2

2

Для начала давайте разберемся с использованием медиа-выражений. В зависимости от того, используете вы (max-width: --px) или (min-width: --px) получается разная направленность применяемых свойств.

(max-width: --px):

max-width

К примеру, код @media (max-width: 766px) { ... } применяется при ширине вьюпорта от 0 пикселей до 766 пикселей, что соответствует диапазону 3 на картинке. Т. о. вы задаёте конечную границу применения ваших свойств.


(min-width: --px):

min-width

При использовании (min-width: --px) всё происходит наоборот. Например, код @media (min-width: 1024px) { ... } будет применять диапазон 4от 1024 пикселей до бесконечности.


Чтобы делать такие резиновые раскладки я рекомендую использовать функцию calc(). У вас есть внешние отступы 17 пикселей, а значит можно для маленьких блоков задать calc(25% - 34px), а для больших calc(100% - 34px).

Ваша проблема начинается в диапазоне от 1010 пикселей и ниже, значит для этого участка можно написать следующий код:

@media only screen and (max-width: 1010px) {
  .postSmall {
    flex-basis: calc(50% - 34px);
  }
  .postBig {
    flex-basis: calc(100% - 34px);
  }
}

.news {
  max-width: 980px;
  min-height: 500px;
  background-color: gray;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.postSmall {
  flex-basis: calc(25% - 34px);
  height: 266px;
  background-color: #fff;
  display: inline-block;
  margin: 17px;
}
.postBig {
  flex-basis: calc(50% - 34px);
  height: 266px;
  background-color: #fff;
  display: inline-block;
  margin: 17px;
}
/* решение проблемы на определенном участке */

@media only screen and (max-width: 1010px) {
  .postSmall {
    flex-basis: calc(50% - 34px);
  }
  .postBig {
    flex-basis: calc(100% - 34px);
  }
}
/* Custom, iPhone Retina */

@media only screen and (min-width: 320px) {}
/* Extra Small Devices, Phones */

@media only screen and (min-width: 480px) {}
/* Small Devices, Tablets */

@media only screen and (min-width: 768px) {}
/* Medium Devices, Desktops */

@media only screen and (min-width: 992px) {}
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<section class="news">
  <div class="postSmall"></div>
  <div class="postSmall"></div>
  <div class="postSmall"></div>
  <div class="postSmall"></div>
  <div class="postBig"></div>
  <div class="postBig"></div>
  <div class="postSmall"></div>
  <div class="postSmall"></div>
  <div class="postSmall"></div>
  <div class="postSmall"></div>
  <div class="postBig"></div>
  <div class="postSmall"></div>
  <div class="postSmall"></div>
</section>

1

div {
box-sizing:border-box;
}

.news{
 max-width: 980px;
 min-height: 500px;
 background-color: gray;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

.postSmall{
  flex-basis: 50%;
  height: 266px;
  background-color: #fff;
  display: inline-block;
  border: 17px solid #ff00ff;
}

.postBig{
  flex-basis: 100%;
  height: 266px;
  background-color: #fff;
  display: inline-block;
  border: 17px solid #ff00ff;
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<section class="news">
  <div class="postSmall"></div>
  <div class="postSmall"></div>
  <div class="postSmall"></div>
  <div class="postSmall"></div>
  <div class="postBig"></div>
  <div class="postBig"></div>
  <div class="postSmall"></div>
  <div class="postSmall"></div>
  <div class="postSmall"></div>
  <div class="postSmall"></div>
  <div class="postBig"></div>
  <div class="postSmall"></div>
  <div class="postSmall"></div>
</section>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.