Media inquiries in Responsive Design: a full Guide (2021)

Bienvenue dans le Guide de démarrage de CSS Media query. Dans cet article, nous explorerons ce qu’est une requête médiatique, comment elle fonctionne et comment elle peut être utilisée correctement. Contrairement à la croyance populaire, ils vont au – delà de la conception réactive (bien que vous vous concentriez ici). Enfin, nous voulons que vous sachiez comment implémenter des requêtes médias pour personnaliser le comportement du site. Qu’est – ce que CSS Media query? Media Query est essentiellement une méthode d’écriture d’un CSS conditionnel. Cela signifie que le navigateur n’exécute les balises CSS que si certaines conditions sont remplies. Son utilisation la plus courante est dans la conception réactive, qui indique au navigateur que lorsque vous êtes au – dessus ou au – dessous d’une certaine taille d’écran, vous pouvez changer la façon dont les éléments du site sont affichés. Cependant, comme nous le verrons plus loin, il existe d’autres façons de les utiliser.
Comment écrire une requête multimédia? Alors, quelle est la bonne façon d’utiliser les requêtes multimédias? Dans CSS, ils font partie de la règle at, dans ce cas @ media. Ensuite, ajoutez le type de support que vous essayez de cibler et la fonctionnalité \/ condition que vous voulez que la requête prenne effet. Media [Media type] ([Media Function]) {\/ \/ Custom CSS} par exemple, le fragment de code suivant est pour les appareils dont l’écran est supérieur à 320 pixels. Tout ce qui est inséré dans les parenthèses de la requête média n’est affiché que sur les appareils du navigateur qui répondent à cette condition. C’est aussi connu sous le nom de point d’arrêt, où la conception change considérablement pour s’adapter à différentes tailles d’écran.
Écran média et (largeur minimale: 320px) {\/ \/ personnaliser CSS} opérateur de requête média dans une requête média CSS, vous pouvez également combiner les conditions suivantes en utilisant des opérateurs tels que et, ou et non: @ Écran média et (largeur minimale: 320px
) et (largeur maximale: 786px) {\/ \/ Custom CSS} dans l’exemple ci – dessus, nous avons modifié la requête originale pour qu’elle ait non seulement la taille minimale de l’écran qui prendra effet, mais aussi la taille maximale de l’écran qui n’est plus appliquée. Et seulement, il n’applique le style que lorsque la requête entière correspond. Il est également souvent utilisé pour améliorer la compatibilité des requêtes médias avec les anciens navigateurs. Par exemple, les navigateurs précédents n’ont pu interpréter que l’écran média @ et (largeur minimale: 320px) comme l’écran média @ et l’ont mal appliqué. Il corrige ce comportement en ne l’incluant que dans @ Media only Screen et (largeur minimale: 320px), sans nuire aux navigateurs modernes.
Types de médias disponibles bien que l’écran soit le type de médias de contestation le plus courant, Nous avons d’autres options: tous – pour tous les appareils d’impression – pour les documents prévisualisés par impression ou les médias qui affichent du contenu par impression vocale – pour les appareils qui lisent du contenu en tant que lecteurs d’écran vous pouvez également cibler plusieurs médias en listant plusieurs médias Écran média, voix {\/ \/ CSS personnalisé} caractéristiques \/ conditions multimédias exemples de conception réactive dans le contexte d’une requête multimédia, la fonction multimédia la plus courante est la largeur, y compris la largeur minimale et la largeur maximale. Cependant, vous avez d’autres options ici, par exemple:
Hauteur – en fait égale à la largeur, mais égale à la hauteur de l’équipement. Il nécessite également une hauteur minimale et une hauteur maximale pour définir la plage. Rapport d’aspect – largeur et hauteur du rapport d’aspect par rapport à la fenêtre. Orientation: vous permet d’appliquer des requêtes selon que l’appareil est en mode vertical ou horizontal. Vol stationnaire – introduit un CSS conditionnel pour les appareils qui ont différents modes de vol stationnaire, comme le curseur de la souris sur l’écran tactile. Il y a aussi des fonctionnalités
Il est important pour l’accessibilité, par exemple: les préférences réduisent le mouvement – vous permet de désactiver l’animation sur le site Web pour l’utilisateur qui anime sur le navigateur. Contraste préféré – cette requête média vous permet de définir différents schémas de couleurs pour les utilisateurs qui ont des préférences définies à faible ou élevé. Cependant, aucun navigateur ne le supporte actuellement. Il y a d’autres caractéristiques, comme la résolution de l’appareil ou la profondeur de la couleur. Vous trouverez la liste complète ici.
Important: les métabalises de fenêtre sans guide de requête média CSS seront complétées sans discuter des métabalises de viewport. Résidence dans la Section Site Web avec l’apparence suivante: Qu’est – ce que ça fait? Réinitialise la taille de la fenêtre sur le Navigateur mobile. Cela est nécessaire parce que les navigateurs mobiles ont généralement des affichages plus larges que les appareils réels. C’est comme ça qu’ils s’adaptent à des sites Web non réactifs sans paraître effrayants. En gros, ils simulent une fenêtre plus grande afin que la conception reste appropriée.
Source de l’image: l’entrée par Google d’une métabalise viewport garantit que cela ne se produira pas, de sorte que les requêtes médias fonctionnent comme prévu. Exemples de demandes de renseignements aux médias maintenant que nous avons compris comment les demandes de renseignements aux médias fonctionnent en général, examinons quelques exemples pratiques pour ramener les nouvelles connaissances à la maison. Définir des points d’arrêt pour différents appareils nous commencerons par un exemple classique. Ici, nous changerons la taille de police du site en fonction de son affichage sur le Bureau, la tablette ou le téléphone. Corps {taille de police: 20px;} Écran média seulement et (largeur maximale: 768px) {corps {taille de police: 18px;}}} Écran média seulement et (largeur maximale: 450px) {texte {taille de police: 16px;}}} Cela permettra de s’assurer que le texte reste lisible sur des écrans plus petits et non accablant.
Affectation de la direction d’utilisation
Toutes les entreprises. Certains d’entre eux peuvent être fabriqués de cette façon. Les technologies CSS telles que flexbox et GRID sont là pour cela. Ils vous permettent de créer des éléments HTML qui s’adaptent automatiquement à la fenêtre et de contrôler son comportement de plusieurs façons. De plus, comme nous l’avons mentionné dans notre manuel de conception de la réactivité, une autre chose importante pour rendre un sujet ou un site Web réactif est d’utiliser des mesures relatives plutôt que absolues. Cela signifie qu’au lieu de définir une barre latérale d’une largeur de 320 Px, il est préférable de lui donner une taille relative, par exemple 32,5%. De cette façon, quel que soit le type d’écran sur lequel il apparaît, il s’adaptera à l’espace disponible, plutôt que d’essayer de forcer l’élément à une largeur qui pourrait ne pas s’adapter à l’écran. Par conséquent, bien qu’il soit important de comprendre les requêtes multimédias, il est tout aussi important de comprendre d’autres façons modernes d’adapter les sites Web aux petits écrans. Pour en savoir plus, utilisez le tutoriel de démarrage ci – dessus. 2021 points d’arrêt pour les demandes de renseignements des médias maintenant que nous savons comment créer des points d’arrêt pour les demandes de renseignements des médias, laissez – nous la question de savoir où les mettre. Par le passé, lorsque nous avions moins d’appareils, vous pouviez les optimiser spécifiquement pour différents appareils. Cependant, aujourd’hui, nous avons beaucoup de types d’appareils, de tailles d’écran, de résolutions, etc. Ce n’est plus possible. Par conséquent, des questions comme « qu’est – ce qu’une requête médiatique standard? » Ça ne marche plus. Certains sont souvent utilisés, par exemple ceux qui sont définis par le Bootstrap. Ils fonctionnent bien sur de nombreux appareils et peuvent vous fournir un bon point de départ. Il existe également des listes de demandes de renseignements sur les médias qui s’adaptent aux appareils courants sur les conseils du SCS. Mais dans l’ensemble, la meilleure façon est de