web-dev-qa-db-fra.com

Comment utiliser les symboles> ou <(Supérieur à et inférieur à) dans les requêtes multimédia

Pouvons-nous utiliser les symboles ">" ou "<" (supérieur à et inférieur à) dans les requêtes multimédia? Par exemple, j'aimerais masquer une plongée pour tous les moniteurs de moins de 768 pixels. puis-je dire quelque chose comme ça:

@media screen and (min-width<=768px) {}
csscss3media-queries
15
user1986096

Les requêtes de médias n'utilisent pas ces symboles. Au lieu de cela, ils utilisent les préfixes min- et max-. Ceci est couvert dans le spec :

  • La plupart des fonctions de média acceptent les préfixes optionnels «min-» ou «max-» pour exprimer les contraintes «supérieur ou égal à» et «inférieur ou égal à». Cette syntaxe est utilisée pour éviter les caractères "<" et ">" susceptibles d'entrer en conflit avec HTML et XML. Les fonctions multimédias qui acceptent les préfixes seront le plus souvent utilisées avec des préfixes, mais peuvent également être utilisées seules.

Donc, au lieu de quelque chose comme (width <= 768px), vous diriez plutôt (max-width: 768px):

@media screen and (max-width: 768px) {}
32
BoltClock
@media screen and (max-width: 768px) { ... }
4
Zack Burt

Découvrez la librairie Sass include-media , qui (bien que ce soit pour Sass) explique comment des appels comme @include media('<=768px') sont mappés vers des requêtes CSS simples @media. En particulier, voir cette section de la documentation.

TLDR, ce que vous apprenez de là est:

Pour faire l'équivalent de quelque chose comme media('<=768px') (inférieur ou égal à 768) en CSS, vous devez écrire

@media (max-width: 768px) {}

et pour faire l'équivalent de media('<768px') (moins de 768) en CSS, vous devez écrire

@media (max-width: 767px) {}

Remarquez comment j'ai soustrait 1 de 768, de sorte que la largeur maximale soit inférieure à 768 (car nous voulions émuler le comportement < inférieur à qui n'existe pas dans CSS).

Donc, pour émuler quelque chose comme media('>768px', '<=1024') en CSS, nous écririons:

@media (min-width: 769px) and (max-width: 1024px) {}

et media('>=768px', '<1024') serait

@media (min-width: 768px) and (max-width: 1023px) {}
1
trusktr