À votre demande, cet article couvrira Requêtes des médias, ce qui signifie utiliser Types de médias avec une ou plusieurs expressions concernant les caractéristiques d'un média afin de définir le formatage pour différents appareils. Les navigateurs ou applications lisent les expressions définies dans le Requête, et si l'appareil en question correspond à ces conditions, le correspondant CSS est appliqué.
Les types de médias précisent à quel type de média un bloc CSS est destiné. HTML a été créé pour être portable, c'est-à-dire pour être lu et interprété par tout type d'appareil. Cependant, chaque appareil restitue le HTML différemment en raison de facteurs tels que les dimensions de l'écran (par exemple, « »).résolution« ». Par exemple, accéder à un site depuis un ordinateur de bureau ne se comportera pas de la même manière que depuis un appareil mobile, car il s'agit d'appareils différents avec des fonctionnalités différentes. contextes de navigation.
Le défi des requêtes multimédias aujourd'hui réside dans l'apparition de plus en plus d'appareils dotés de tailles d'écran variées et de capacités matérielles similaires à celles des ordinateurs de bureau, ce qui les amène à naviguer presque comme sur des ordinateurs de bureau. iPhone X à titre d'exemple : sa qualité d'affichage est superbe et son navigateur rend les pages comme un navigateur de bureau classique.
Dans ce cas, il n'est pas nécessaire de préparer une mise en page et un CSS spécifiquement pour portable Types de médias sur l'iPhone : bien qu'il s'agisse d'un appareil portable, il ne se comporte pas comme tel. Il ne se comporte pas non plus exactement comme un ordinateur de bureau. Même si le moteur de rendu de Safari est identique à celui de la version pour ordinateur, le comportement et les habitudes de navigation de l'utilisateur diffèrent. On se retrouve donc dans une situation intermédiaire : impossible de fournir un CSS entièrement distinct pour l'appareil portable, ni de se fier uniquement à une version pour ordinateur de bureau (écran) feuille de style.
Vous trouverez ci-dessous comment définir les règles de feuille de style à charger :
<style>
@media screen et (largeur maximale : 1 024 px) {
.petite-résolution { affichage : aucun ; }
}
.petite-résolution { affichage : bloc ; }
</style>
En option, vous pouvez créer un fichier séparé .css fichier et hébergez-le soit sur votre propre serveur, soit via la solution CDN de ma startup, Blenner SmartCDN. Ensuite, incluez-le dans la section métadonnées de votre HTML comme ceci :
<link rel=”stylesheet” href=”URL_OF_YOUR_CSS_FILE”>
Une fois votre fichier CSS en place, il vous suffit d'appeler la classe là où vous souhaitez un comportement réactif. Par exemple, pour l'appliquer à une image enveloppée dans une balise personnalisée nommée « C » :
<c class=”small-resolution”>
<img src="”IMAGE_URL”" alt=""DESCRIPTION"" id="”OPTIONAL_ADDITIONAL_ID”">
</c>
J'espère que cela aide ! 😀
Laissez vos commentaires ci-dessous et partagez avec vos amis !
