ATOZ CSS: Création de design réactif avec les requêtes multimédias

Points clés

• Évitez d'utiliser des points d'arrêt spécifiques au périphérique lors de la création de conceptions réactives. Au lieu de cela, définissez les principaux points d'arrêt et les points de réglage fins secondaires qui sont approximativement de la taille de la plupart des téléphones, tablettes et périphériques de bureau / ordinateur portable.
• Utilisez EM ou REM comme unités de point d'arrêt au lieu de pixels pour une meilleure évolutivité. Cela vous aidera si l'utilisateur à l'échelle de la page ou augmente la taille du texte.
• Les requêtes multimédias CSS sont un outil puissant pour créer des conceptions réactives. Ils vous permettent d'appliquer différents styles à différents appareils avec différentes tailles d'écran. Cependant, évitez de les utiliser pour localiser des appareils spécifiques, car cela peut entraîner un cauchemar de maintenance. Au lieu de cela, concentrez-vous sur la création de conceptions réactives qui fonctionnent pour toutes les tailles d'écran.

Cet article fait partie de la série Atoz CSS. Voir les captures d'écran complètes et les transcriptions des requêtes médiatiques ici.

Bienvenue dans notre série Atoz CSS! Dans cette série, j'explorerai différentes valeurs (et propriétés) de CSS, chacune commençant par différentes lettres de l'alphabet. Nous savons que parfois les captures d'écran ne suffisent pas, donc dans cet article, j'ai ajouté un nouveau conseil / cours rapide sur les requêtes multimédias.

m Requête médiatique représentative

Je suppose que la grande majorité des concepteurs et développeurs Web connaissent désormais le concept de conception réactive. Sinon, consultez la capture d'écran de la requête multimédia.

Étant donné que la conception réactive est très populaire, c'est un excellent endroit pour apprendre certains conseils qui peuvent améliorer la façon dont nous développons des sites Web et des applications pour une variété d'appareils. Voici quelques conseils CSS pour vous aider.

Astuce 1: N'utilisez pas de points d'arrêt pour des appareils spécifiques

J'espère que cela va sans dire, mais juste au cas où vous auriez besoin d'un rappel ou que vous n'avez pas rencontré de telles meilleures pratiques auparavant, je pense que cela vaut la peine d'être réitérant.

Les points d'arrêt des appareils spécifiques sont facilement identifiés dans votre code via les requêtes multimédias comme indiqué ci-dessous (ajoutez des commentaires pour une clarté accrue):

<code>/* ipad 纵向 */
@media screen and (min-width: 768px;) {}

/* ipad 横向 */
@media screen and (min-width: 1024px;) {}

/* iphone */
@media screen and (min-width: 320px) and (max-width: 480px;) {}</code>

Ces points d'arrêt sont définis pour les appareils Apple et ont des valeurs de "nombre magique", telles que 768px ou 1024px.

Et si la fenêtre de l'utilisateur est 1025px ou 1023px?

La requête multimédia ne prendra pas effet et le style de la taille de l'appareil ne sera pas appliqué.

Parfois, vous avez peut-être besoin de valeurs très spécifiques pour les points d'arrêt (plus à ce sujet plus tard), mais il me semble que voir des points d'arrêt pour ces appareils spécifiques est une odeur de code.

Alors, que devez-vous faire?

Technique 2: Définissez le point d'arrêt principal et le point de réglage fin Secondary

Lorsque je travaille sur des projets réactifs, j'ai tendance à définir des points d'arrêt arbitraires entiers qui sont à peu près de la taille de la plupart des téléphones, tablettes et appareils de bureau / ordinateur portable.

J'ai tendance à utiliser les principaux points d'arrêt suivants (bien que cela puisse parfois changer en fonction du projet):

<code>/* ipad 纵向 */
@media screen and (min-width: 768px;) {}

/* ipad 横向 */
@media screen and (min-width: 1024px;) {}

/* iphone */
@media screen and (min-width: 320px) and (max-width: 480px;) {}</code>

L'utilisation de ces points d'arrêt ne limite pas la conception à changer uniquement à ces points, mais fournit plutôt une bonne base pour l'utilisation de trois types d'appareils principaux.

Pour les ajustements de conception basés sur le contenu (c'est-à-dire que lorsque le contenu commence à être endommagé, déséquilibré ou ne pas bien s'adapter), vous pouvez utiliser des points de réglage fin pour ajuster les éléments et polir les détails du projet.

<code>/* 大手机和小平板 */
@media screen and (min-width: 500px;) {}

/* 平板电脑和小显示器 */
@media screen and (min-width: 800px;) {}

/* 笔记本电脑和台式机 */
@media screen and (min-width: 1200px;) {}</code>

Astuce 3: Utilisez EM ou REM comme unité de point d'arrêt

N'utilisez pas PX, mais utilisez l'une de ces unités relatives afin que si l'utilisateur évolue la page ou augmente la taille du texte, vous pouvez obtenir une meilleure évolutivité. Par exemple, lorsque je redimensive à l'aide d'unités EM, le principal point d'arrêt ci-dessus est le suivant.

<code>/* 调整共享按钮的位置 */
@media screen and (min-width: 1150px;) {
  margin-right: 1em;
}</code>

FAQ sur CSS Media Requêtes et points d'arrêt (FAQ)

Quelles sont les meilleures pratiques pour définir les points d'arrêt CSS?

Les points d'arrêt du CSS sont essentiels pour créer des conceptions réactives. Ils permettent aux dispositions de changer à des points prédéfinis, c'est-à-dire à fournir différentes dispositions pour différentes tailles d'écran. Les meilleures pratiques pour définir les points d'arrêt CSS incluent d'abord de commencer par une disposition en mouvement, puis de travailler vers le haut étape par étape. Il est également recommandé d'utiliser des unités EM ou REM au lieu de pixels comme points d'arrêt, car ils sont plus flexibles et plus faciles d'accès. Enfin, évitez d'utiliser trop de points d'arrêt. Tenez-vous à des tailles standard pour les appareils mobiles, les tablettes et les ordinateurs de bureau.

Comment utiliser les requêtes multimédias CSS pour une conception réactive?

Les requêtes multimédias CSS sont un outil puissant pour créer des conceptions réactives. Ils vous permettent d'appliquer différents styles à différents appareils avec différentes tailles d'écran. Vous pouvez les utiliser dans CSS en utilisant les règles @media, les médias comportent des conditions telles que max-width ou min-width, et les styles CSS que vous souhaitez appliquer.

Quels sont les points d'arrêt CSS standard pour la conception réactive?

Les points d'arrêt CSS standard pour la conception réactive sont généralement les suivants: 320px pour les appareils mobiles, 768px pour les tablettes, 1024px pour les tablettes et 1200px pour les grands ordinateurs de bureau. Cependant, ce ne sont pas des réglementations rigides et peuvent être ajustées en fonction des besoins spécifiques de la conception.

Comment tester mon point d'arrêt CSS?

Vous pouvez utiliser l'outil de vérification de votre navigateur pour tester vos points d'arrêt CSS. Cet outil vous permet de simuler différentes tailles d'écran et de voir comment votre disposition réagit. De plus, vous pouvez utiliser des outils en ligne tels que Browserstack ou des sites Web de test de conception réactifs pour tester différents appareils et résolutions d'écran.

Puis-je utiliser les requêtes multimédias CSS pour localiser des appareils spécifiques?

Oui, vous pouvez utiliser les requêtes multimédias CSS pour localiser des appareils spécifiques. Cependant, cela n'est généralement pas recommandé car il peut entraîner un cauchemar de maintenance. Au lieu de cela, concentrez-vous sur la création de conceptions réactives qui fonctionnent pour toutes les tailles d'écran.

Comment modifier la taille de la police à l'aide de la requête multimédia CSS?

Vous pouvez utiliser la requête multimédia CSS pour modifier la taille de la police en fonction de la taille de l'écran. Par exemple, vous voudrez peut-être ajouter une taille de police à un écran plus grand pour une plus grande lisibilité. Vous pouvez le faire en définissant une requête multimédia avec la taille de l'écran souhaitée, puis en définissant une nouvelle taille de police.

Quelle est la différence entre min-width et max-width dans la requête multimédia CSS?

et min-width Dans max-width dans CSS, les requêtes de médias se réfèrent aux tailles de fenêtre minimales et maximales que le style des requêtes multimédias s'appliquera. min-width est utilisé pour appliquer des styles à n'importe quelle taille de la fenêtre supérieure à la valeur spécifiée, tandis que max-width est utilisé pour appliquer des styles à toute taille de la fenêtre inférieure ou égale à la valeur spécifiée.

Puis-je utiliser CSS Media Queries avec JavaScript?

Oui, vous pouvez utiliser la méthode window.matchMedia() pour utiliser les requêtes de média CSS avec JavaScript. Cette méthode renvoie un objet MediaQueryList qui représente le résultat d'une chaîne de requête multimédia CSS spécifiée, qui peut ensuite être utilisée pour appliquer différentes fonctionnalités JavaScript en fonction de la taille de l'écran.

Comment utiliser la requête multimédia CSS pour traiter les écrans haute résolution?

Vous pouvez utiliser la fonctionnalité de médias de résolution pour traiter les écrans haute résolution à l'aide de requêtes multimédias CSS. Cette fonctionnalité vous permet d'appliquer des styles en fonction de la densité de pixels de l'écran. Par exemple, vous voudrez peut-être fournir des images de résolution plus élevée pour les écrans à haute densité afin de s'assurer qu'ils sont nets et nets.

Puis-je utiliser la requête multimédia CSS pour détecter le mode sombre?

Oui, vous pouvez utiliser les requêtes multimédias CSS pour détecter si l'utilisateur a défini son système sur le mode sombre. Vous pouvez utiliser la fonction médiatique prefers-color-scheme pour y parvenir. Cette fonctionnalité vous permet d'appliquer différents styles en fonction du schéma de couleurs préféré de l'utilisateur (c'est-à-dire des couleurs claires ou sombres).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!