CSS: определение медиа-запроса в пределах одного класса

Можно ли написать что-то вроде

.global-container
  margin-top: 60px
  background-image: $image-bg
  @media(max-width: 767px)
    margin-top: 0
    background-image: none

Таким образом, мы можем определить настольные и мобильные CSS внутри класса

Я пробовал это, но, кажется, не работает

ОБНОВИТЬ: Это на самом деле работает: http://css-tricks.com/media-queries-sass-3-2-and-codekit/

Ответ 1

Вам нужно сделать следующее:

@media all and (max-width: 767px) {
    .global-container {
        margin-top: 0;
        background-image: none;
    }
}

Если вы хотите настроить таргетинг на рабочий стол, вы можете использовать:

@media (min-width:1025px) { 
    .global-container {
        margin-top: 0;
        background-image: none;
    }
}

Я просто замечаю, что вы используете SASS, вы можете сделать вот так:

.global-container {
    margin-top: 60px;
    background-image: $image-bg;
    @media (max-width: 767px) {
        /* Your mobile styles here */
    }
    @media (min-width:1025px) {
        /* Your desktop styles here */
    } 
}

Ответ 2

В простом CSS ответ - нет. Вы не можете. Медиа-запросы всегда должны представлять собой внешнюю оболочку, заключающую в себе внутреннюю оболочку, которая должна применяться при этом условии.

Однако в SASS и LESS он полностью действителен. Любой конвертер, который поддерживает вложенные фигурные скобки, должен иметь возможность перемещать медиазапрос наружу, что позволяет CSS работать так, как указано выше. (Вы можете проверить выходной CSS после компиляции файла sass/less и посмотреть, как они это делают.)

Итак, если у вас есть что-то вроде этого:

body {
    background:green;
    @media (min-width:1000px) {background:red;}
}

Экран будет зеленым в CSS (потому что он игнорирует эту странную вещь @media внутри блока определения стиля тела) и красным в SASS/LESS (потому что он получает то, что вы на самом деле хотели бы видеть).

Если быть точным, препроцессоры будут понимать приведенный выше фрагмент как:

body {
  background: green;
}
@media (min-width: 1000px) {
  body {
    background: red;
  }
}

Ответ 3

Вам определенно нужно применить несколько видов мультимедийных запросов. Код не является магическим, и CSS требует определенных параметров для тех видов запросов.

Вы можете использовать JS, но это не рекомендуется на основе вашего использования.

Вот решение CSS

@media all and (minmax-width: 0px) and (min-width: 320px), (max-width: 320px) 
    { Insert Code };
}'

Ответ 4

Работает:

.column-1-3 {
  width: 33.3333%;
  @media (max-width: 600px) {
    width: 100%;
  }
}

http://css-tricks.com/media-queries-sass-3-2-and-codekit/