Page_4-4

4-4 : Utilisez le responsive design avec les Media Queries ici

Les media queries sont surtout utilisées pour adapter le design du site aux différentes largeurs d'écran.

Toutes les pages d'exercices de ce chapitre ne sont pas responsive afin de pouvoir appliquer et constater les effets des médias queries des exercices

Syntaxe d'une media query : @media screen and (max-width: 1200px) {p { color: deeppink; }} voir détail ce dessous :

Avant toute chose, il est indipensable de rajouter dans l'en-tête (head) du site la ligne suivante. on demande a ce que le "viewport" du navigateur, c’est à dire la surface d’affichage du navigateur s’adapte à la largeur d’affichage de l’appareil. Cela permet donc d’assurer un affichage standard sur tous les mobiles.

‹meta nome=viewport" content="width=device-width, initial-scale=1.0"›

Important : Si on a une page CSS juste pour les médias quieries et d'autres pour le reste du style. Il est important pour qu'elles fonctionne d'être mise en dernière ligne par rapport aux autres lignes de pages CSS que l'on a pu créer.

@media

Les media queries sont des règles qui indiquent quand on doit appliquer des propriétés CSS, en fonction de la taille de l'écran sur lequel s'affiche le site web. En inspectant la page, on peut voir le rendu en fonction du choix d'écran (à gauche d'éléments).

@media sreen

C'est le type de média le plus utiliser, car les sites web sont destinés à être regardé sur des écrans.

(max-width : 1200px)

Cela indique la taille de l'image à partir de laquel l'apparence de la page va changer. Le 1200px est un point de rupture (breakpoints) pour indiquer à partir de quel taille, des que la taille de l'ecran est inferieur à 1200px, le changement de valeur doit se faire. L'attribut peut aussi être "min-width"

and

C'est un mot clé qui sépare les deux règles. S'il y a cela et (and) cela appliquer cela.

{p { color: deeppink; }}

C'est la propriété et sa valeur qui sera appliquer à l'élémant (selecteur) choisi

Differentes règles disponibles :

La règle @ @media permet d'appliquer une partie d'une feuille de styles en fonction du résultat d'une ou plusieurs requêtes média (media queries). Grâce à cette règle, on peut indiquer une requête média et un ensemble de règles CSS qui s'appliquent uniquement si la requête média est vérifiée pour l'appareil, le contexte avec lequel le contenu est consulté

Pour plus de détail : ici

Types de médias :

• all : Valeur par défaut. Nos règles vont s’appliquer à tous les appareils.

• printer : Nos règles ne s’appliqueront que pour les imprimantes.

• speech : Nos règles ne s’appliqueront qu’aux liseurs d’écran qui sont capable de rendre le contenu d’une page de manière sonore.

• screen : Nos règles ne vont s’appliquer qu’aux appareils dotés d’un écran.

media all : type d'écran de sortie. Avec la valeur la plus utilisée, all : tout type de média.

Applicable à tous les appareils

media print : imprimante (pratique pour formater un contenu pour l’imprimer).

Destiné pour le contenu paginé et les documents visualisés sur un écran en aperçu d'impression. Les propriétés des médias paginés contrôlent la présentation du contenu imprimable ou de tout autre média dont le contenu est divisé en pages individuelles. Elles permettent de définir des sauts de page, de contrôler la zone d'impression, de donner des styles différents aux pages gauche et droite et de contrôler l'application des césures à l'intérieur des éléments. Voici quelques-unes des propriétés supportées les plus fréquemment utilisées :

• break-before : cette propriété décrit la façon dont la page, la colonne ou la région se fragmente avant la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée

• break-after : cette propriété CSS définit la façon dont la page, la colonne ou la région se fragmente après la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.

• break-inside : cette propriété CSS définit comment la page, la colonne ou la région se fragmente au sein de la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.

• orphans : cette propriété définit le nombre minimum de lignes qui doivent rester en bas d'une page, d'une région ou d'une colonne dans un conteneur de bloc.

• widows : cette propriété définit le nombre minimum de lignes qui peuvent être laissées en haut de la page, région ou colonne suivante. En utilisant la propriété widows, on évite d'avoir des veuves sur une seule ligne

• @page : cette règle @ est utilisée afin de modifier certaines propriétés CSS lorsqu'on imprime un document. La règle @page ne permet pas de modifier toutes les propriétés mais uniquement celles qui portent sur les marges, les lignes orphelines et veuves ainsi que les sauts de page du document. Si on utilise cette règle @ pour modifier une autre propriété, ce changement sera ignoré.

media speech :

Correspond aux outils de synthèse vocale.

media screen :

Pour plus de détail sur les diférentes tailles d'écrans pour le CSS :

Cliquer sur l'image pour agrandir:

Pour les tailles de mobiles cliquer : ici

Exemple d'écriture :

@media screen and ( propriété 1 : valeur 1) {

selecteur {

propriété 2: valeur 2 ; }

}

Pour tous changement de taille d'écran et une propriété 1 (préfixe) avec sa valeur 1 appliquer au selecteur le changement de la propriété 2 avec sa valeur 2.

height : hauteur exact.

CSS :

HTML :

Ensuite, 1 : cliquer droit sur l'image pour faire apparaitre le menu, 2 : cliquer gauche sur "Inspecter".

Ensuite, dans "Dimensions: Responsive", dans la deuxième case, changer la valeur et mettre la valeur exacte de 375. Pour ce cas, cela ne fonctionne si et seulement si la valeur est exact. La zone où était l'image est vide.

4-4 : Utilisez le responsive design avec les Media Queries ici

Syntaxe d'une media query : @media screen and (max-width: 1200px) {p { color: deeppink; }} voir détail ce dessous :

Important : Si on a une page CSS juste pour les médias quieries et d'autres pour le reste du style. Il est important pour qu'elles fonctionne d'être mise en dernière ligne par rapport aux autres lignes de pages CSS que l'on a pu créer.

@media

@media sreen

(max-width : 1200px)

and

{p { color: deeppink; }}

Differentes règles disponibles :

Types de médias :

media all : type d'écran de sortie. Avec la valeur la plus utilisée, all : tout type de média.

media print : imprimante (pratique pour formater un contenu pour l’imprimer).

media speech :

media screen :

Exemple d'écriture :

height : hauteur exact.

width : largeur exact.

Préfixe min-widht : largeur minimale.

Préfixe min-height : hauteur minimale.

Préfixe max-width : largeur maximale.

1er exemple :

2ème exemple : Exemple du cours d'OpenClassrooms :

Préfixe max-height : hauteur maximale;

Préfixe min-widht et min-height.

orientation : orientation du périphérique (portrait ou paysage) :

La caractéristique orientation se définit grâce à l'un des mots-clés suivants :

Exemple pour un iPhone 12 pro : on pourra voir l'importance des tailles et du rendu en fonction du mode portrait ou mode paysage qui est different au rendu.

Exemple :

Plusieurs exemples avec @media screen :

Changement de couleur de paragraphes :

Redimensionner un conteneur :

Quand les blocks sont flex :

Quand les blocks sont grid :

Enlever les images :

overflow : contrôle de dépassement de textes.

scroll : mise en place des barres de défilement.

visible (par defaut) : reste visible et sort volontairement du bloc.

hidden : cache le texte lors du dépassement des limites.

auto : c'est le navigateur qui décide de mettre des barres de défilement. Conseillé d'utiliser le plus souvent.

Mot clé pour combiner les règles.

only : “uniquement” :

and : “et” :

not : “non” :