Мне сказали, что я не могу использовать максимальную ширину и должен использовать минимальную ширину в css

Question

Это с экраном @media и (max-width: 700px) {

https://i.gyazo.com/eab7c69146b5d47f3ce9adefae6e712d.png

Когда я использую @media screen и (min-width : 700px) {Это облажается. Как мне изменить его на минимальную ширину, чтобы не испортить?

https://gyazo.com/3c27f20efe29a4cf001bf531dac59405.png

Answer 1

Используйте этот код

@ экран только мультимедиа и (min-width: 700px) {

}

это вам очень поможет

Answer 2

Вы можете использовать как min-widht, так и max-width, а также комбинировать их, если хотите.

min-width пример:

@media screen and (min-width: 576px) {
  body {
    background-color: lightgreen;
  }
}

max-width пример:

@media screen and (max-width: 767.98px) {
  body {
    background-color: lightgreen;
  }
}

min-width и max-width Пример комбинации:

@media (min-width: 576px) and (max-width: 767.98px) {
  body {
    background-color: lightgreen;
  }
}

Обратите внимание, что я использовал 767.98px для max-width, потому что следующее правило мультимедиа будет для пример @media (min-width: 768px) and (max-width: 991.98px) {}.

Подробнее о правилах мультимедиа здесь . Вы также можете увидеть, как правила мультимедиа используются в bootstrap здесь .