Блог

Итак, я не очень хорош в css, так как я больше работаю над серверной частью, у меня есть два max-device-width , где, если max равно или меньше значения, оно будет соответствовать тому, какой стиль реализован, но у меня есть это в css:

 @media (max-device-width: 700px){
  .main-news .mn-img img {
    height: 15vh;
  }
}

@media (max-device-width: 1024px) {
  .main-news .mn-img img {
    height: 25vh;
  }
}
  

моя проблема в том, что, когда устройство уже находится ниже 700px , оно все равно следует 1024px стилю, а не тому, что я поставил 700px . Как я могу это сделать? что, когда он теперь находится ниже 700px , он будет следовать 700px стилю, а не 1024px стилю в css.

Для 1024px вам нужно сделать как min, так и max, чтобы они попадали в диапазон. Например:

     @media (min-device-width: 701px) and (max-device-width: 1024px) {
      .main-news .mn-img img {
        height: 25vh;
      }
    }
  

Обратите внимание, что указанная ширина не может перекрываться друг с другом. Если вы хотите установить маленький экран с максимальной шириной 700 пикселей, то минимальная ширина для среднего экрана должна начинаться с 701 пикселей.

Вы можете использовать медиа-запросы для указания диапазона, например: @media (min-width: 30em) and (max-width: 80em) {... и вы можете комбинировать их по своему усмотрению. Поэтому используйте min-width и max-with для указания диапазонов.

Посмотрите здесь полное руководство по медиа-запросам: https://css-tricks.com/a-complete-guide-to-css-media-queries /