CSS
LEÇON 5

Voici quelques bonnes pratiques à suivre pour assurer la responsivité d'un site web :

1. Utilisation de Mises en Page Flexibles : Utilisez les propriétés CSS flexbox pour créer des mises en page flexibles qui s'adaptent facilement à différentes tailles d'écrans.

Exemple :



2. Utilisation de Grilles Adaptables : Utilisez des systèmes de grille CSS comme CSS Grid ou Bootstrap Grid pour créer des mises en page qui s'ajustent automatiquement en fonction de la taille de l'écran.

Exemple :



3. Utilisation d'Unités de Mesure Relatives : Privilégiez l'utilisation d'unités de mesure relatives comme les pourcentages (%), les vh (viewport height), les vw (viewport width), les em et les rem plutôt que les unités absolues comme les pixels (px). Cela permettra à vos éléments de s'adapter en fonction de la taille de l'écran.

Exemple :




Bien sûr ! Voici une explication détaillée des fonctions avancées CSS mentionnées :



4. Utilisation de Fonctions Avancées CSS :
   Les fonctions avancées CSS telles que calc(), min(), max(), et clamp() sont très utiles pour créer des mises en page flexibles et dynamiques en ajustant les valeurs des propriétés CSS en fonction de différents facteurs.
• calc() :
  Cette fonction permet d'effectuer des calculs simples pour définir les valeurs des propriétés CSS. Elle peut être utilisée pour combiner différentes unités de mesure, effectuer des opérations mathématiques, ou définir des valeurs en pourcentage.



Exemple :




• min() : Cette fonction retourne la plus petite valeur parmi les valeurs fournies. Elle est utile pour définir une valeur minimale pour une propriété CSS.



Exemple :




• max() : Cette fonction retourne la plus grande valeur parmi les valeurs fournies. Elle est utile pour définir une valeur maximale pour une propriété CSS.



Exemple :




• clamp() : Cette fonction permet de définir une valeur comprise entre une valeur minimale et une valeur maximale. Elle est utile pour définir des valeurs de propriétés CSS qui doivent être limitées à une plage spécifique.



Exemple :

Dans cet exemple, la largeur de l'élément sera définie selon les règles suivantes :

• Si la largeur de l'élément parent est inférieure à 200px, alors la largeur de l'élément sera 200px.
• Si la largeur de l'élément parent est comprise entre 200px et 500px, alors la largeur de l'élément sera égale à 50% de la largeur de son parent.
• Si la largeur de l'élément parent est supérieure à 500px, alors la largeur de l'élément sera 500px.

Ainsi, dans le contexte de la fonction clamp(), le 50% représente une valeur cible ou préférée pour la largeur de l'élément lorsque les conditions le permettent. Si la largeur de l'élément parent est comprise dans la plage définie par 200px et 500px, l'élément prendra 50% de la largeur de son parent, ce qui peut être considéré comme une valeur optimale dans certaines situations.

Les media queries sont des règles CSS qui permettent d'appliquer des styles différents en fonction des caractéristiques du périphérique, telles que la largeur de l'écran, la résolution, l'orientation, etc. Elles sont essentielles pour rendre un site web réactif et adaptatif à différents appareils. Voici comment les utiliser avec des exemples détaillés :

1. Media Queries pour les Tailles d'Écran Courantes :

Les tailles d'écran les plus courantes pour lesquelles vous voudrez définir des styles différents sont celles des appareils mobiles, des tablettes et des ordinateurs de bureau. Voici des exemples de media queries pour ces tailles d'écran :

• Mobiles (inférieur à 768px) :



• Tablettes (768px - 1023px) :



• Ordinateurs de Bureau (1024px et plus) :



2. Media Queries pour l'Orientation de l'Écran :

Vous pouvez également utiliser les media queries pour ajuster le style en fonction de l'orientation de l'écran, c'est-à-dire si l'appareil est en mode paysage ou portrait. Voici un exemple :

• Portrait :



• Paysage :

3. Media Queries pour les Résolutions d'Écran :

Parfois, vous voudrez appliquer des styles différents en fonction de la résolution de l'écran. Voici comment le faire avec des exemples :

• Résolution Retina (densité de pixels élevée) :



• Résolution Standard (densité de pixels normale) :

Exemple :

Voici un exemple complet montrant comment utiliser les media queries pour créer une mise en page réactive :

En utilisant des media queries de cette manière, vous pouvez créer des mises en page et des styles qui s'adaptent de manière fluide à différentes tailles d'écrans, offrant ainsi une expérience utilisateur optimale sur tous les appareils.

1. Création d'une Mise en Page Flexible avec Flexbox :
• Utilisez les propriétés flexbox pour créer une mise en page flexible qui s'adapte à différentes tailles d'écrans.
• Atelier : Créez une grille de produits avec Flexbox et assurez-vous qu'elle s'ajuste correctement sur les appareils mobiles et les tablettes.

Exemple : Grille de Produits avec Flexbox.







Dans cet exemple, nous utilisons Flexbox pour créer une grille de produits. La classe .grid-container utilise display: flex pour créer un conteneur flexible qui dispose les éléments sur une ligne. La propriété flex- wrap: wrap permet aux éléments de passer à la ligne suivante lorsque l'espace est insuffisant. En ajustant la largeur des éléments avec width, nous obtenons une disposition flexible qui s'adapte automatiquement à différentes tailles d'écrans.

2. Utilisation d'une Grille Adaptable avec CSS Grid :


• Utilisez CSS Grid pour créer une grille adaptable qui réorganise les éléments en fonction de la taille de l'écran.
• Atelier : Créez une mise en page de blog avec CSS Grid et assurez-vous qu'elle s'adapte aux différentes tailles d'écrans.

Exemple : Mise en Page de Blog avec CSS Grid







Dans cet exemple, nous utilisons CSS Grid pour créer une mise en page de blog. La classe .grid-container utilise display: grid pour créer un conteneur de grille. Avec grid-template-columns: repeat(auto- fill, minmax(300px, 1fr)), nous définissons des colonnes de taille flexible qui s'adaptent à la taille de l'écran. La propriété grid-gap ajoute un espacement entre les éléments de la grille.



3. Utilisation des Media Queries pour la Responsivité :


• Utilisez les media queries pour appliquer des styles différents en fonction de la taille de l'écran.
• Atelier : Définissez des media queries pour ajuster la taille du texte et la disposition des éléments sur les appareils mobiles et les tablettes.

Dans cet exemple, nous utilisons les media queries pour ajuster la taille du texte et la disposition des éléments en fonction de la taille de l'écran. Sur les appareils mobiles, le texte est centré, sur les tablettes il est aligné à gauche, et sur les ordinateurs de bureau il est aligné à droite. Cela garantit une lisibilité optimale et une présentation cohérente sur tous les appareils.
Suivez ces bonnes pratiques et en utilisant les outils CSS appropriés , vous pouvez créer des sites web responsifs qui offrent une expérience utilisateur optimale sur tous les appareils.