Appelez-nous aujourd'hui ! +33766664691 | contact@develop4fun.com

CSS : types de medias

(Dernière mise à jour: 5 juillet 2023)

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

Banner Sudoku Quest

Voila, vous pouvez maintenant briller en soirée …

Formations de Develop4fun
5 juillet 2023

0 réponses sur "CSS : types de medias"

Laisser un message

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *