2. QU’EST-CE QU’UNE MEDIA QUERIES ?
▸ Spécification CSS3 pour attribuer une ou plusieurs propriétés CSS uniquement
lorsque la condition spécifiée a lieu.
▸ Se créée avec @media suivie du type de l’écran et de conditions.
▸ S’intègre directement dans le fichier style.css du site. Il y a
également la possibilité de créer une feuille de style spéciale de l’appeler
depuis votre HTML :
<link rel="stylesheet" media="screen and (max-width:
votre_resolution_en_px) » href=« votre-fichier. css» />
2MACÉ ALEXIS - LES MEDIA QUERIES
3. LA CONSTRUCTION DES MÉDIAS QUERIES
▸ Les principaux critères disponibles :
▸ Width : largeur dans le navigateur;
▸ Height : hauteur dans le navigateur;
▸ Device-width : largeur de l’écran de l’appareil;
▸ Device-height : hauteur de l’écran de l’appareil;
▸ Orientation : orientation de l’appareil.
▸ Ces critères peuvent être associer avec « only », « and » et « not ».
3MACÉ ALEXIS - LES MEDIA QUERIES
4. LA CONSTRUCTION DES MÉDIAS QUERIES
▸ Mise en pratique
▸ Si l’on ne veut pas afficher nos h2 lorsque l’écran passe en dessous
des 480px.
▸ @media all and (min-width: 480px)
{
h2{
display:none;
}
}
4MACÉ ALEXIS - LES MEDIA QUERIES
5. LA CONSTRUCTION DES MÉDIAS QUERIES
▸ Mise en pratique
▸ Si l’on ne veut pas afficher nos h2 lorsque les écrans sont orientés en
mode portrait.
▸ @media all and (orientation:portrait)
{
h2{
display:none;
}
}
5MACÉ ALEXIS - LES MEDIA QUERIES
