(Он работает с другими браузерами, но не с хромом)
Я хочу применить стиль только тогда, когда размер браузера меньше 1400px
с 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 пикселей (я знаю, что это работает, но max-width не работает)
Скрипт для этого
https://jsfiddle.net/j4Laddtk/
Вы пытались добавить окно просмотра?
<meta name="viewport" content="width=device-width, initial-scale=1">
Видовой экран используется при рендеринге страниц и поэтому в основном используется при работе с мобильными веб-сайтами, но при работе с медиа-запросами он помогает CSS определить, какова фактическая ширина устройства.
Попробуйте этот метод.
Это будет нацелено на устройство
@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%;
}
}
Ваш браузер ZOOM -ed отличается от уровня 100%? Если это так, выполните сброс (увеличение и уменьшение) до 100%.
Это сработало для меня
@media screen and (max-width: 700px) and (min-width: 400px) {
.heading-left { left: -0.5%; }
}
инструмент разработчика говорил, что размер области просмотра составляет 1400 пикселей, но фактическая ширина, которую рассматривал css, была больше 1400 пикселей. Из-за этого медиа-запрос не работает.
@media only screen and (max-width: 1000px) {
/*Don't forget to add meta viewport in your html*/
}
Если это не работает, попробуйте в браузере проверить элемент навигации по сети и отключить отключенный кеш. Иногда это не работает для кеша браузера.
Удачного кодирования
Вам необходимо разместить запросы @media после того, как вы объявите свой стандарт