Medias queries
Responsive Web Design
(slides en cours d'écriture ...)
Définition Simple
Les "Médias Queries" permettent d'appliquer des styles CSS à certains éléments en fonction de la taille de l'écran du navigateur.
Cette technique appelée également "Responsive Web Design" permet d'optimiser la navigation sur les écrans de petite (et grande) taille.
Les 'Medias'
Il existe plusieurs types de médias de destination qui sont pris en charge par CSS dont voici les principaux :
- screen (tous types d'écrans)
- print (impression)
- projection (projecteurs, présentations)
- tv (télévisions)
- all (tous les types de médias)
En CSS
<link rel='stylesheet' media='print' href='style_impression.css>
On peut également l'écrire au sein d'un fichier CSS :
/* Mon style CSS de base */#container { background-color: #bada55;}/* ... */
/* Pour le média de type 'print' : */@media print { /* Changer la couleur de fond du container à 'transparent' */ #container { background-color: transparent; }}
Medias Queries
Les Médias Queries permettent d'avoir plus de possibilités.
Par exemple, de changer la position d'un élément lorsque la taille d'écran est inférieure à une cvetrtaine taille