Requêtes de médias
Les requêtes de médias sont une caractéristique de CSS qui permettent page web contenu à adapter à différentes tailles d'écran et résolutions. Ils sont un élément fondamental de web design réactif et sont utilisés pour personnaliser l'apparence des sites Web pour plusieurs appareils.
Les requêtes multimédia peuvent être insérées dans une page Web. HTML ou inclus dans un séparé .CSS fichier référencé par la page Web. Vous trouverez ci-dessous un exemple de requête multimédia simple:
Écran @média et (largeur maximale: 768px)
{
en-tête {hauteur: 70px; }
article {font-size: 14px; }
img {max-width: 480px; }
}
La requête multimédia ci-dessus s'active si un utilisateur navigateur la fenêtre est 768 Pixel large ou moins. Cela peut se produire si vous réduisez la fenêtre sur un ordinateur de bureau ou si vous utilisez un appareil mobile, tel qu'un ordinateur de bureau. comprimé, pour afficher la page Web.
Dans la conception Web réactive, les requêtes multimédia servent de filtres pour différentes tailles d'écran. Comme tous les modules d'une feuille de style en cascade, ceux qui apparaissent en bas de la liste remplacent ceux qui se trouvent au-dessus d'eux. Par conséquent, la défaut les styles sont généralement définis en premier dans un document CSS, suivis des requêtes de support pour différentes tailles d'écran. Par exemple, les styles de bureau peuvent être définis en premier, suivis d’une requête multimédia avec des styles pour les utilisateurs de tablette, suivis d’une requête multimédia conçue pour smartphone utilisateurs. Les styles peuvent également être définis dans l'ordre inverse, ce qui est considéré comme un développement "mobile en premier".
Tandis que largeur min est de loin la fonctionnalité la plus couramment utilisée dans les requêtes multimédia, de nombreuses autres sont également disponibles. Les exemples comprennent min-device-width, hauteur min-appareil, ratio d'aspect, max-index-couleur, résolution maximale, orientation biologique et résolution. La résolution valeur, par exemple, peut être utilisée pour détecter des écrans HiDPI (tels que affiche de la rétine) et chargez les graphiques haute résolution au lieu des images standard.