• Votre panier est vide.

CSS : types de medias

(Dernière mise à jour: 14 janvier 2019)

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

 @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

14 janvier 2019

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 *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

© Develop4fun. Tous les droits réservés.