web-dev-qa-db-fra.com

Nidification des requêtes de média

Par défaut, je veux donner à mon élément de corps une frontière verte. Sur un périphérique prenant en charge l'affichage de la rétine, je veux vérifier la taille en premier. Sur un iPad, je veux donner à mon corps une frontière rouge et sur un iphone, je veux lui donner une frontière bleue. Mais les requêtes de médias de nidification comme ça ne fonctionne pas:

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; }
   }
}
cssresponsive-designmedia-queriesretina-display
28
TK123

Non, vous devez utiliser l'opérateur and et écrire cela comme deux questions. Vous pouvez cependant faire cela dans SCSS, qui compilera à CSS, mais il les combinera en les déployant et en utilisant l'opérateur and.

C'est un problème courant, et une fois que j'ai écrit d'abord moins ou SCSS, je ne voulais jamais revenir à l'écriture de cette longue main.

CSS à longue distance:

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

Les requêtes de nidification peuvent fonctionner, mais la prise en charge varie d'un navigateur.

27
cirrus