Запросы вложенности - программирование
Подтвердить что ты не робот

Запросы вложенности

По умолчанию я хочу, чтобы мой элемент тела был зеленой рамкой. На устройстве, поддерживающем отображение сетчатки, я хочу сначала проверить размер. На ipad я хочу дать своему телу красную рамку и на iphone я хочу дать ему синюю границу. Но запросы вложенных медиа-запросов, например, не работают:

body { border: 1px solid green; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
   @media (max-width: 768px) and (min-width: 320px) {
      body { border: 1px solid red; }
   }
   @media (max-width: 320px) {
      body { border: 1px solid blue; }
   }
}
4b9b3361

ОТВЕТЫ

Ответ 1

Нет. Вам нужно использовать оператор and и написать это как два запроса. Вы можете, однако, сделать это в SCSS, который будет скомпилирован для CSS, но он объединит их, развернув их и используя оператор and.

Это обычная проблема, и как только я впервые написал LESS или SCSS, я никогда не хотел возвращаться к написанию этой длинной руки.

Долгосрочный CSS:

@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px) and (min-width: 320px),
                  (min-resolution: 192dpi) and (max-width: 768px) and (min-width: 320px) {
  body {
    border: 1px solid red;
  }
}
@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 320px),
                  (min-resolution: 192dpi) and (max-width: 320px) {
  body {
    border: 1px solid blue;
  }
}

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