Au-delà des requêtes multimédias: utiliser des fonctionnalités HTML et CSS plus récentes pour les conceptions réactives

La conception Web réactive va au-delà des requêtes multimédias et des dispositions CSS modernes comme Flexbox et Grid. Cet article explore les techniques HTML et CSS souvent négligées pour créer des sites Web vraiment réactifs, minimisant la dépendance à l'égard des requêtes médiatiques pour une approche plus naturelle et plus efficace.

Les requêtes multimédias deviennent supplémentaires lorsqu'ils sont utilisés en conjonction avec ces caractéristiques avancées. Explorons comment.

Images vraiment réactives: au-delà de width: 100%

Alors que width: 100% simplifie le redimensionnement de l'image, il présente des inconvénients: distorsion de l'image et téléchargements importants inutiles sur des appareils plus petits. L'optimisation de la résolution et de la taille de l'image est cruciale pour les performances. Des images haute résolution doivent être servies à des écrans plus grands et des versions à faible résolution à des versions plus petites.

Le<picture></picture> Element offre une sélection de ressources d'image précise basée sur les requêtes multimédias. Au lieu de mettre à l'échelle une seule grande image, nous spécifions plusieurs versions d'image pour différents scénarios.

<picture>
  <source media="(min-width: 1000px)" srcset="picture.png">
  <source media="(min-width: 601px)" srcset="picture-lg.png">
  <source media="(min-width: 401px)" srcset="picture-sm.png">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358939320557.png?x-oss-process=image/resize,p_40" class="lazy" alt="Au-delà des requêtes multimédias: utiliser des fonctionnalités HTML et CSS plus récentes pour les conceptions réactives">
</source></source></source></picture>

Cet exemple utilise picture-sm.png comme repli. Les requêtes multimédias ciblent les largeurs de vision spécifiques, sélectionnant les images appropriées. Nous pouvons également incorporer la densité d'image (1x, 2x, 3x) dans l'attribut srcset pour une optimisation supplémentaire.

Le <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358939433455.png?x-oss-process=image/resize,p_40" class="lazy" alt="Au-delà des requêtes multimédias: utiliser des fonctionnalités HTML et CSS plus récentes pour les conceptions réactives"> <h3 id="Device-Resolution-Based-Styling-with-CSS-Media-Queries">Device Resolution-Based Styling with CSS Media Queries</h3> CSS Media Requêtes peut cibler la résolution d'écran (DPI) plutôt que la simple taille de la fenêtre:

 @media uniquement écran et (Min-résolution: 192dpi) {
  / * Style pour les écrans haute résolution * /
}

Cela permet de servir des images de haute qualité aux écrans à haute résolution. Cependant, se fier uniquement à la résolution peut servir de grandes images à de petits écrans, il est donc recommandé de combiner des contrôles de taille de la fenêtre.

Exemple:

 corps {
  Image d'arrière-plan: URL (image-md.png); / * Image par défaut * /
}

@media uniquement écran et (Min-résolution: 192dpi) {
  corps {
    Image d'arrière-plan: URL (image-lg.png); / * Image haute résolution * /
    FIT d'objet: couverture;
    Position d'objets: 100% 150%; / * Ajuster le point focal * /
  }
}

Les propriétés object-fit et object-position offrent un contrôle à grains fins sur le recadrage d'images et les points focaux.

Fonctions CSS: min() , max() et clamp()

• min() : définit une taille minimale pour un élément. Utile pour empêcher le texte de devenir illisible:

   html {
    taille de police: min (1rem, 22px); / * Taille de police entre 16px et 22px * /
  }

• max() : définit une taille maximale pour un élément:

   .boîte {
    Largeur: Max (60%, 600px); / * Largeur au plus 60% ou 600px * /
  }

• clamp() : combine min() et max() , fournissant une valeur minimale, préférée et maximale:

   .boîte {
    taille de police: pince (1rem, 40px, 4rem); / * Taille de police dans une plage * /
  }

Unités réactives: au-delà des pixels

Les avantages de la conception réactive des unités relatives:

• vw / vh : largeur / hauteur de la fenêtre.
• rem : par rapport à la taille de la police de l'élément racine.
• em : par rapport à la taille de la police de l'élément parent.
• % : Par rapport à la taille de l'élément parent.

Les unités rem évoluent avec des changements de taille de police du navigateur, fournissant une mise à l'échelle cohérente. Les unités em offrent un contrôle plus granulaire basé sur les tailles d'éléments parents. vw et vh sont directement liés aux dimensions de la fenêtre.

Aller au-delà des requêtes médiatiques: une approche holistique

Ces fonctionnalités HTML et CSS offrent un contrôle accru de la réactivité, complémentant plutôt que de remplacer les requêtes multimédias. Ils offrent un contrôle plus fin sur l'expérience utilisateur sur divers appareils et tailles d'écran. En tirant parti de ces techniques, les développeurs peuvent créer des conceptions réactives plus robustes et efficaces.

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!