it-swarm.com.ru

CSS: максимальная ширина для @media-запроса не работает

(Работает в других браузерах, но не в Chrome)

Я хочу применять стиль только тогда, когда размер браузера меньше 1400 пикселей

с max-width не работает

@media only screen and (max-width:1400px)  {
.heading-left {
    left: -0.5%;
  }
}

с min-width работает 

@media only screen and (min-width:480px)  {
.heading-left {
    left: -0.5%;
   }
}

Но также изменяется, когда ширина браузера превышает 1400 пикселей (я знаю, как это работает, но максимальная ширина не работает)

Скрипка для этого

https://jsfiddle.net/j4Laddtk/

17
Divya Barsode

Вы пытались добавить окно просмотра в?

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

Рабочая JSFiddle

Viewport используется при рендеринге адаптивных страниц и, следовательно, в основном используется при работе с мобильными веб-сайтами, но при работе с медиа-запросами помогает CSS определить, какова фактическая ширина устройства.

43
Stewartside

Попробуйте этот метод.

Это будет целью на основе устройства 

@media screen 
 and (max-device-width: 1400px) 
 and (min-device-width: 480px) 
{ 
   .heading-left {
    left: -0.5%;
   }

}

Таргетинг на основе области окна браузера

@media screen 
 and (max-width: 1400px) 
 and (min-width: 480px) 
{ 
   .heading-left {
    left: -0.5%;
   }

}
9
Prime

Ваш браузер ZOOM- отличается от уровня 100%? Сброс (увеличение и уменьшение) в 100% и посмотреть, если это исправлено.

2
T.Todua

Это сработало для меня

@media screen and (max-width: 700px) and (min-width: 400px) { 
    .heading-left { left: -0.5%; }
}
1
Pasquale Muscettola

инструмент разработчика говорил, что размер области просмотра составляет 1400 пикселей, но реальная ширина, которую рассматривал css, была больше 1400 пикселей. Из-за этого медиа-запрос не работает.

0
Divya Barsode
@media only screen and (max-width: 1000px) {
  /*Don't forget to add meta viewport in your html*/
}

Если это не работает, попробуйте в браузере проверить элемент навигации по сети и отключить отключенный кеш . Иногда это не работает для кеша браузера.

Счастливое кодирование

0
Abdul Barik