Несколько медиа запросов в css не работают

Question

Несколько медиа запросов в css не работают

У меня есть несколько запросов в моей таблице стилей, где код@media only screen and (min-width : 768px) and (max-width : 1024px) { } работает отлично, но под ним у меня @media screen and (min-device-width : 176px) (max-device-width : 360px) {} не работает.

CSS:

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

body {background: red; } }





@media screen and (min-device-width : 176px) (max-device-width : 360px) {

body {background: green; } }

1162 3

html css

3 ответов:

Comments

Ничего не найдено.

Nix · Accepted Answer · 2014-04-22 22:17:39

Вы пропускаете AND между (min-device-width : 176px) (max-device-width : 360px).
@media screen and (min-device-width : 176px) and  (max-device-width : 360px) {
    body {background: green; } 
}
Другие проблемы здесь вы используете min-device-width. (ссылаясь на разрешение устройства против ширины браузера), что и говорит @NoobEditor ниже.

Вы делаете это нарочно? Если нет, вы должны использовать min-width && max-width
@media screen and (min-width : 176px) and  (max-width : 360px) {
    body {background: green; } 
}

NoobEditor · Accepted Answer · 2013-12-26 17:22:32

Проверьте эту скрипку, измените ширину браузера, чтобы увидеть медиа-запрос в действии
@media screen and (max-width : 1500px) {
    body {
        background: #000;
        border-top: 2px solid #DDDDDD;
    }
}

@media screen and (min-width : 768px) and (max-width : 1024px) {
    body {
        background: #fff;
        border-top: 2px solid #DDDDDD;
    }
}
Эта скрипка работает нормально, но Если вы измените порядок запросов к медиа, она не будет работать...попробуйте сами!

CSS всегда выбирает последний стиль, который был объявлен, если для attrib найдено несколько стилей.

Например:
@media (max-width: 1024px) {
  body {
    background: black;
  }
}

@media (max-width: 768px) {
  body {
    background: white;
  }
}
Для 765px ( поскольку оба m. q покрывают эту ширину ), выбранный цвет будет white

Adriano Resende · Accepted Answer · 2017-12-08 04:57:21

Для нескольких width для одного стиля используйте ,:
@media (max-width: 360px), (max-width: 768px) {

    /* style goes here */

}