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

Question

[EvilScream]

Добрый день я использую 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 очень простои я просто двигаю картинки левее или правее в зависимости от экрана

Answer 1

[Александр Аксентьев]

@media only screen and ( min-width: 1366px ) and  (max-width: 768px)

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

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

Код на jsfiddle, самим что ли придумывать и проверять?

Comments

[EvilScream]

это вообще никак не работает,вариантов много потому-что по другому я не знаю как

[Григорий]

EvilScream: смысл в том, что минимум больше максимума

[EvilScream]

Григорий: да, я это исправил,результат тот же

Answer 2

[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;
}

вот код,который я пытаюсь сделать

Answer 3

[Alexander Belov]

@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)

Comments

[EvilScream]

Я думал над этим но как это исправить,чтобы пересечений не было ?
media ( max-width: 1024px )
так делал но проблема не ушла

[devstudent]

EvilScream: да прочтите же внимательно, не min, а max

[EvilScream]

Попробую изменить на 1 пиксель может проблема уйдет

[EvilScream]

devstudent: читаю и не понимаю? где у меня не так ?

[EvilScream]

У меня проблемы начинаются только когда я ввожу media only screen and ( min-width: 768px ) and (max-width: 1366px) вот после этого не работает ни один css

[devstudent]

EvilScream: media only screen and ( min-width: 768px ) and (max-width: 1023px)
media only screen and ( min-width: 1024px ) and (max-width: 1366px) вот и ответ. границы медиазапросов не должны пересекаться, если было (max-width: 1023px) , то для того же элемента следующий запрос надо писать начиная с 1024 пикселей, если для больших экранов

[Ankhena]

devstudent: EvilScream: Границы медиа запросов могут пересекаться сколько угодно. Сработают правила, которые ниже, все как обычно.

[devstudent]

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

[Ankhena]

devstudent: Да? Обычно сначала пишут общие стили, а потом в медиа для конкретных условий их точно также перебивают. И никакой путаницы.
Это первое.
Второе, диапазоны перекрываются, но селекторы или свойства селектороа в них могут быть указаны разные никак не пересекающиеся.