Comment utiliser les points d'arrêt CSS pour créer des conceptions réactives

Le succès d'un site Web dépend beaucoup de l'expérience utilisateur. De nos jours, les utilisateurs accèdent à un site Web à partir de nombreux appareils différents, et fournir une expérience utilisateur égale sur chaque appareil peut être un défi. C'est là que les points d'arrêt CSS peuvent être utiles.

Les points d'arrêt CSS peuvent être très bénéfiques pour créer des sites réactifs qui offrent une expérience utilisateur exceptionnelle sur n'importe quel appareil, mais ils restent également l'un des aspects les plus déroutants de la conception Web, en particulier pour les nouveaux développeurs.

Commençons!

Qu'est-ce qu'un point d'arrêt CSS ?

Les points d'arrêt CSS sont des points où le contenu du site Web réagit en fonction de la largeur de l'appareil, vous permettant de montrer la meilleure mise en page possible à l'utilisateur.

Les points d'arrêt CSS sont également appelés points d'arrêt de requête multimédia, car ils sont utilisés avec la requête multimédia.

Dans cet exemple, vous pouvez voir comment la mise en page s'adapte à la taille de l'écran. La disposition à grande résolution a un en-tête et une disposition de corps à deux colonnes, mais dans un petit appareil, elle se transforme en une disposition à une colonne.

Comment définir des points d'arrêt CSS

La partie délicate consiste à décider des points d'arrêt eux-mêmes. Il n'y a pas de modèles standard et différents frameworks utilisent différents points d'arrêt.

Alors, quelle approche devriez-vous adopter pour vos points d'arrêt ?

Il y a deux approches probables à suivre :

• Points d'arrêt basés sur l'appareil
• Points d'arrêt basés sur le contenu

Points d'arrêt CSS basés sur l'appareil

Décider des points d'arrêt en fonction de différents appareils semble être une bonne idée, mais en réalité, ce n'est pas toujours la meilleure approche. Nous avons déjà suffisamment d'appareils dont nous devons nous soucier, et lorsqu'un nouveau sort avec une largeur différente, revenir à votre CSS et ajouter à nouveau un nouveau point d'arrêt prend du temps.

Néanmoins, cela reste une option viable, car vous constaterez peut-être que cela vous convient. Voici un exemple de points d'arrêt spécifiques à l'appareil :

 [css]/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- Google Pixel ----------- */ /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { } /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { }[/css]

Avec cette approche, vous finirez par avoir une énorme liste de requêtes médiatiques.

Points d'arrêt CSS basés sur le contenu

L'option idéale pour décider des points d'arrêt est basée sur le contenu de votre site. Cette méthode vous permet d'ajouter simplement des points d'arrêt là où votre contenu nécessite un ajustement de la mise en page. Cela rendra votre requête multimédia beaucoup plus simple et gérable.

Ce point d'arrêt signifie que le CSS s'appliquera lorsque la largeur de l'appareil est de 768 pixels et plus.

 [css]@media only screen (min-width: 768px){ ... }[/css]

Vous pouvez également définir une plage avec des points d'arrêt, de sorte que le CSS ne s'appliquera que dans ces limites.

 [css]@media only screen and (min-width: 768px) and (max-width: 959px){ ... }[/css]

Quand utiliser des points d'arrêt CSS de largeur minimale ou maximale

Vous pouvez définir vos points d'arrêt de différentes manières en utilisant min-width , max-width ou même en combinant les deux. Mais la question est, quand devriez-vous utiliser chacun d'eux ?

Pour y répondre de manière simple, si vous concevez votre mise en page avec une approche mobile d'abord, utilisez des points d'arrêt de largeur minimale et progressez.

Définissez vos styles par défaut pour le petit appareil et ajustez-les simplement en conséquence pour les appareils plus grands.

De même, si vous concevez d'abord pour des appareils plus grands, définissez ensuite votre CSS par défaut comme vous le feriez normalement et ajustez-le pour des appareils plus petits avec l'approche de largeur maximale.

Utilisation des points d'arrêt CSS avec SASS

Si vous utilisez un préprocesseur comme SASS ou SCSS, vous pouvez écrire des points d'arrêt beaucoup plus intelligents. Mixin vous permet de créer des points d'arrêt plus déclaratifs à retenir, comme ceci :

 [css]@mixin tablet-up { @media only screen (min-width: 768px) { @content; } }[/css]

Lorsque vous travaillez en groupe, il est beaucoup plus facile de se souvenir de "tablette-up" que de 768px ou 48em. N'importe qui peut comprendre ce point d'arrêt; c'est pour les tablettes et les tailles d'écran supérieures.

Quels points d'arrêt CSS utiliser

Nous avons vu comment utiliser les points d'arrêt et quand les utiliser, mais la question demeure : quels points d'arrêt spécifiques devez-vous utiliser ?

Décomposons un peu les choses. Vous devez cibler des tailles d'ordinateurs de bureau, de tablettes et de mobiles uniquement. Vous pouvez consulter certains frameworks populaires pour avoir une idée de l'approche à suivre.

Bootstrap a des points d'arrêt à 576px, 768px, 992px et 1200px. La fondation a principalement des points d'arrêt à 40em et 64em. Chez Bulma, les points d'arrêt sont définis à 768px, 769px, 1024px, 1216px et 1408px.

Chacun a des points d'arrêt différents, mais une chose qu'ils ont en commun est une approche mobile d'abord. Vous pouvez utiliser l'un de ces points d'arrêt comme point de départ ou créer le vôtre, comme ceci :

 [css]@media (min-width: 640px){ ... } @media (min-width: 768px){ ... } @media (min-width: 1024px){ ... } @media (min-width: 1200px){ ... }[/css]

Vous avez eu l'idée!

Emballer

En résumé, les points d'arrêt CSS sont un excellent moyen de restructurer votre mise en page pour offrir la meilleure expérience utilisateur sur différents appareils.

Essayez toujours de créer des points d'arrêt en fonction de votre propre contenu, et non des appareils. Répartissez-les à une largeur logique plutôt qu'à une largeur aléatoire et maintenez-les à un nombre gérable, de sorte que la modification reste simple et claire.

Quels points d'arrêt CSS utilisez-vous pour vos mises en page ? Faites-le nous savoir dans la section des commentaires ci-dessous.

Et après?

Créez et testez gratuitement vos blocs Gutenberg personnalisés avec Local !

En savoir plus sur Local ici!

Pour plus de conseils sur la création de sites réactifs, consultez ces articles !

• Comment rendre votre site WordPress adapté aux mobiles
• Comment créer un menu de navigation réactif dans WordPress
• 7 conseils de bonnes pratiques pour une conception Web réactive