En utilisant @media , un site Web peut avoir une mise en page différente pour les écrans , l’impression, les téléphones mobiles , tablettes, etc.
Types de support
Certaines propriétés CSS sont uniquement conçus pour certains types de médias.
Par exemple la propriété « voice-family » est conçu pour les utilisateurs sonores.
D’autres propriétés peuvent être utilisées pour différents types de supports. Par exemple, la propriété « font-size » peut être utilisée pour les deux supports screen et print , mais avec des valeurs différentes. Un document a généralement besoin d’ une plus grande taille de police sur un écran que sur papier , et les polices sans empattement sont plus faciles à lire sur l’écran , tandis que les polices serif sont plus faciles à lire sur papier.
La @MEDIA
@media permet de styler différemment les éléments Html sur différents supports dans la même feuille de style.
Le style dans l’exemple ci-dessous indique au navigateur d’afficher la police Verdana à 14 pixels sur écran. Mais si la page est imprimée , elle sera dans une police de 20 pixels , et d’une couleur rouge :
Exemple de medias :
@media screen {
p {
font-family : Verdana , sans-serif;
font-size: 14px ;
}
}
@media print {
p {
font-size: 20px ;
color: red;
}
}Autres types de medias
all : Tout type de média
aural : Utilisé pour la parole et synthétiseurs sonores
braille : Utilisé pour appareils braille à retour tactile
embossed : Utilisé pour les imprimantes braille
handheld : Utilisé pour les petits appareils
print : Destiné à l’impression
projection : Sert aux présentations, comme des diapositives
screen : Ecrans d’ordinateur
tty : Utilisé pour les médias utilisant une grille de caractères fixe , comme les téléscripteurs et les terminaux
tv : Utilisé pour les appareils du type télévision
Voila, vous pouvez maintenant briller en soirée …
0 commentaires