Points d'arrêt dans CSS Media Queries | Expliqué
Introduction aux points d'arrêt CSS
Les points d'arrêt dans CSS sont appelés les points sur lesquels la disposition d'un site Web modifie la taille de l'écran du type de périphérique. Ces points sont également considérés comme des points d'arrêt des requêtes multimédias car celles-ci sont spécifiées dans les requêtes médiatiques.
Maintenant que nous avons appris ce que sont les points d'arrêt des requêtes médiatiques, explorons comment les définir.
Définition des points d'arrêt CSS
Aucune norme n'est fournie pour définir un point d'arrêt, par conséquent, les points d'arrêt définis dans diverses structures Web peuvent différer. Cependant, nous avons reçu deux types d'approches pour définir un point d'arrêt.
1. Points de rupture de type périphérique
2. Points de rupture de type contenu
Voyons-les en détail.
Points de rupture de type périphérique
Comme son nom l'indique, les points d'arrêt du type de périphérique concernent la procédure de spécification des points d'arrêt en fonction de différents types de périphériques. Bien que cela puisse ne pas être considéré comme une bonne approche car la technologie évolue à la minute et que de nouveaux appareils émergent de temps en temps. Par conséquent, chaque fois qu'un nouvel appareil émerge, les développeurs doivent spécifier un point d'arrêt pour cet appareil particulier qui peut être mouvementé.
De plus, la liste des requêtes multimédias est énorme lors de la définition des points d'arrêt en fonction du type d'appareil. Différents appareils sur la base desquels vous pouvez décider des points d'arrêt sont les suivants.
1. Bureau
2. Comprimés
3. Téléphones portables
Ici, nous avons présenté quelques exemples de points d'arrêt basés sur des appareils.
Pour iPhone 13
@media uniquement écran et (largeur de périphérique: 1170px) et (hauteur du périphérique: 2532px)…
Pour Samsung Galaxy S9+
@Media uniquement écran et (largeur de dispositif: 1440px) et (hauteur du périphérique: 2960px)…
Au lieu de spécifier séparément les points d'arrêt de chaque appareil, vous pouvez également définir des points d'arrêt pour les groupes d'appareils communs.
/ * Pour les très petits appareils (486px et moins) * /@media uniquement écran et (largeur max: 486px) …
/ * Pour les petits appareils (596px et plus) * /
@media uniquement écran et (largeur min: 596px) …
/ * Pour les appareils moyens (720px et plus) * /
@media uniquement écran et (largeur min: 720px) …
/ * Pour les grands appareils (995px et plus) * /
@media uniquement écran et (largeur min: 995px) …
/ * Pour des appareils supplémentaires (1100px et plus) * /
@media uniquement écran et (largeur min: 1100px) …
Points de rupture de type contenu
Spécifiant les points d'arrêt en fonction du type de contenu que votre site Web affiche, les points d'arrêt du type de contenu sont utilisés. Ceci est considéré comme une bonne approche car cette approche vous oblige à spécifier les points d'arrêt uniquement aux points où le contenu a besoin de toute sorte de réajustement. L'utilisation de cette approche Le nombre de requêtes multimédias devient de moins en plus gérable.
Certains points d'arrêt de type de contenu sont fournis ci-dessous.
Pour la largeur d'écran 720px et plus large.
@Media uniquement écran et (largeur min: 720px)…
Pour une résolution d'écran entre 480px et 720px.
@Media uniquement écran et (largeur min: 480px) et (largeur maximale: 720px)…
Utilisation de points d'arrêt de la largeur MIN et du maximum aux bons endroits
Dans les exemples ci-dessus, vous devez avoir remarqué que nous avons utilisé deux types de points d'arrêt qui sont de la largeur min et une largeur maximale. Une question doit se poser dans votre esprit lequel utiliser lorsque.
La réponse à cette question est simple: si vous développez d'abord votre site Web pour les appareils plus petits, définissez vos points d'arrêt CSS par défaut avec la largeur min et ajustez les plus grands appareils en conséquence. Pendant ce temps, l'inverse est le cas pour des appareils plus grands. Si vous développez d'abord pour des appareils plus grands, utilisez la largeur maximale, puis réglez pour des appareils plus petits en conséquence.
Types de points d'arrêt utilisés
Lorsque le marché du type d'appareil n'était pas aussi énorme qu'aujourd'hui, la largeur d'écran pour chaque appareil a été spécifiée séparément, cependant, cette approche n'est pas recommandée maintenant car il existe une vaste gamme de types d'appareils sur le marché.
L'approche préférée est que vous devez être conscient du type de votre conception Web, de votre public cible et du type d'appareils que votre public utilise principalement et de la largeur de l'écran de ces appareils. Ici, nous avons enrôlé certains points d'arrêt fréquents utilisés.
1. Pour les appareils mobiles: 320px à 480px
2. Pour les tablettes et iPads: 481px à 768px
3. Pour les ordinateurs portables: 769px à 1024px
4. Pour les ordinateurs de bureau: 1025px à 1200px
Conclusion
Les points d'arrêt dans CSS sont appelés les points sur lesquels la disposition d'un site Web modifie la taille de l'écran du type de périphérique. Il existe deux types de points d'arrêt, l'un qui est spécifié sur la base du type de périphérique et l'autre est défini sur la base du type de contenu. L'approche utilisant le type de contenu est préférée au type d'appareil car il existe une vaste gamme d'appareils disponibles sur le marché et il devient difficile de spécifier les points d'arrêt pour chaque appareil individuellement. Bien qu'il existe certains points d'arrêt communs utilisés pour divers appareils dont nous avons discuté en détail dans cet article ainsi que d'autres détails concernant les points d'arrêt.