intérêt des media queries

Les media queries font partie des nouveautés de CSS3. Il ne s’agit pas de nouvelles propriétés mais de règles que l’on peut appliquer dans certaines conditions. Ainsi, si la résolution de l’écran du visiteur est inférieure ou supérieure à tant de pixels, alors les propriétés CSS changent. Cela permet notamment de changer l’apparence du site selon le type d’écran d’affichage utilisé. Par exemple, on pourra augmenter la taille du texte, changer la couleur de fond, positionner le menu différemment selon certaines résolutions, …

 

Contrairement à ce qu’on pourrait penser, les media queries ne concernent pas que les résolutions d’écran. Vous pouvez changer l’apparence de votre site en fonction d’autres critères comme le type d’écran (smartphone, télévision, projecteur…), le nombre de couleurs, l’orientation de l’écran (portrait ou paysage), …

 

 

appliquer une media query

Les media queries sont donc des règles qui indiquent quand on doit appliquer des propriétés CSS.
On écrit la règle dans le fichier.csscomme ceci :

On peut rajouter le préfixemin-oumax-devant la plupart de ces règles. Ainsi,min-widthsignifie « Largeur minimale »,max-height« Hauteur maximale », etc.

Les règles peuvent être combinées à l’aide des mots suivants :

• only: « uniquement » ;

• and: « et » ;

• not: « non ».

 

 

Exo – index-flex.html

 

la propriété > box-sizing

En CSS, la largeur et la hauteur affectées à un élément s’appliquent par défaut à la boîte de contenu (content box) de l’élément. Si l’élément possède une bordure (border) ou du remplissage (padding), celui-ci est ajouté à la largeur et/ou à la hauteur de la boîte affichée à l’écran. Cela signifie qu’il faut ajuster les valeurs de hauteur et de largeur afin qu’elles permettent d’ajouter une bordure ou un remplissage.

La propriété et la valeur box-sizing : border-box; peuvent être utilisées afin d’ajuster ce comportement.

source : https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing

 

 

gérer le contenu du bloc avec des tailles fixes

Définir des dimensions précises sur la taille des blocs peut engendrer un dépassement du contenu. La propriété overflow: (couper un bloc) permet de les contrôler.

• visible (par défaut) : si le contenu dépasse les limites de taille, il reste visible et sort volontairement du bloc.

• hidden : si le contenu dépasse les limites, il sera tout simplement coupé.

• scroll : le texte sera coupé mais le navigateur mettra en place des barres de défilement pour qu’on puisse lire l’ensemble du contenu.

• auto (fortement conseillée !) : c’est le navigateur qui décide de mettre ou non des barres de défilement (il n’en mettra que si c’est nécessaire).

Si le contenu est un texte qui risque d’être long et de ne pas être coupé (comme « aaaaaaahhhhhhhh!!!!! » pouvant être saisi par les utilisateurs dans un forum), vous devez utiliser la propriété word-wrap. Elle permet de forcer la césure des très longs mots (comme aussi une adresse de site).

 

 

la classe .container

En général, la classe .container englobe tout le contenu d’un site. Elle permet de centrer le contenu de la page.

 

 

la propriété > object-fit

La propriété CSS object-fit définit la façon dont le contenu d’un élément remplacé (<img> ou <video> par exemple) doit s’adapter à son parent en utilisant sa largeur et sa hauteur.

source : https://developer.mozilla.org/fr/docs/Web/CSS/object-fit

object-fit : cover;
La taille réelle de l’objet est calculée pour couvrir l’affichage de toute la boîte de contenu. Si les ratios de l’objet et de la boîte ne correspondent pas, le contenu sera rogné.

 

 

la propriété CSS > display

https://www.w3schools.com/cssref/pr_class_display.asp

La propriété display spécifie le comportement d’affichage d’un élément.

à noter : Chaque élément d’une page Web est une boîte rectangulaire. La propriété d’affichage CSS détermine le comportement de cette boîte rectangulaire.