@EvilScream

Почему разрешения @media only screen не работают?

Добрый день я использую media only screen для следующих разрешений
@media only screen and ( min-width: 320px ) and (max-width: 568px)
@media only screen and ( min-width: 360px ) and (max-width: 640px)
@media only screen and ( min-width: 414px ) and (max-width: 736px)
@media only screen and ( min-width: 412px ) and (max-width: 732px)
@media only screen and ( min-width: 768px ) and (max-width: 1024px)
@media only screen and ( min-width: 1024px )  (max-width: 1366px)

Все они прекрасно работают но есть одно НО у меня сбились настройки css у ноутбука 1366 х 768
я так же пытался сделать:
@media only screen and ( min-width: 1366px ) and  (max-width: 768px)

Но начинается конфликт с этими двумя :
@media only screen and ( min-width: 768px ) and (max-width: 1024px)
@media only screen and ( min-width: 1024px )  and (max-width: 1366px)

они попросту не работают. Я крутил вертел эти media пытался по разному настроить но результат один и тот же css сбивается для моего ноутбука или не работают расширения ( min-width: 768px ) and (max-width: 1024px), ( min-width: 1024px ) (max-width: 1366px)

P.S код css очень простои я просто двигаю картинки левее или правее в зависимости от экрана
  • Вопрос задан
  • 1598 просмотров
Пригласить эксперта
Ответы на вопрос 3
Sanasol
@Sanasol
нельзя просто так взять и загуглить ошибку
@media only screen and ( min-width: 1366px ) and  (max-width: 768px)


как это вообще должно работать?
1366 < N < 768

Зачем там много вариантов? getbootstrap.com/css/#grid-media-queries

Код на jsfiddle, самим что ли придумывать и проверять?
Ответ написан
@EvilScream Автор вопроса
.woocommerce-MyAccount-navigation  ul  li:nth-of-type(1) {
background: url("http://www.pumpinup.com/wp-content/uploads/2017/01/meter.png")   210px 15px; !important;
background-repeat: no-repeat !important;
}

.woocommerce-MyAccount-navigation  ul  li:nth-of-type(2) {
background: url("http://www.pumpinup.com/wp-content/uploads/2017/01/cart.png")   210px 15px; !important;
background-repeat: no-repeat !important;
}
.woocommerce-MyAccount-navigation  ul  li:nth-of-type(3) {
background: url("http://www.pumpinup.com/wp-content/uploads/2017/01/file-zip.png")   210px 15px; !important;
background-repeat: no-repeat !important;
}
.woocommerce-MyAccount-navigation  ul  li:nth-of-type(4) {
background: url("http://www.pumpinup.com/wp-content/uploads/2017/01/home3.png")   210px 15px; !important;
background-repeat: no-repeat !important;
}

.woocommerce-MyAccount-navigation  ul  li:nth-of-type(5) {
background: url("http://www.pumpinup.com/wp-content/uploads/2017/01/user.png")   210px 15px; !important;
background-repeat: no-repeat !important;
}
.woocommerce-MyAccount-navigation  ul  li:nth-of-type(6) {
background: url("http://www.pumpinup.com/wp-content/uploads/2017/01/exit.png")   210px 15px; !important;
background-repeat: no-repeat !important;
}


вот код,который я пытаюсь сделать
Ответ написан
Комментировать
AlexanderBelov
@AlexanderBelov
Frontend developer
@media only screen and ( min-width: 768px ) and (max-width: 1024px)
@media only screen and ( min-width: 1024px ) and (max-width: 1366px)


Пересекается точка 1024px, может, в этом проблема?

@media only screen and ( min-width: 768px ) and (max-width: 1023px)
@media only screen and ( min-width: 1024px ) and  (max-width: 1366px)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы