CSS3 Font Face Utiliser des polices de caractère non standard.

Présentation au sujet: "CSS3 Font Face Utiliser des polices de caractère non standard."— Transcription de la présentation:

1 CSS3 Font Face Utiliser des polices de caractère non standard

2 Lattribut media avant CSS3 1. 2. 3. 4. Media Queries ! 5. 6. 7. 8....

3 Lattribut media avant CSS3 1./* fichier: style.css */ 2.body { 3. color: red; 4. font-size: 14px; 5.} 6. 7.@media print { 8. body { 9. font-size: 18px; 10. color: black; 11. } 12.}

4 Ce qui change avec CSS3 Possibilité de ciblage étendues Largeur et hauteur de lappareil ou de la zone de visualisation width/height, device-width/device-height Orientation (portrait, paysage) orientation, landscape / portrait Résolution (en dpi par exemple) resolution Ratio de lappareil (16/9, 4/3 par exemple) aspect-ratio

5 Ce qui change avec CSS3 Possibilité de mélanger plusieurs critères pour un seul bloc en utilisant des opérateurs logiques (et, ou, non, uniquement) Par exemple: @media screen and (max-width:640px){ /* ici du css */ }

6 Le problème du viewport sur mobile Affichage avec le viewport par défaut

7 Le problème du viewport sur mobile 1. 2. head 3. meta 4. Media Queries ! title 5. 6. meta 7. 8. head 9. body 10.... 11. body

8 les points de rupture telephone width < 768px tablette width >= 768 et =< 992 ordi de bureau width >= 992

9 les points de rupture 1.@media screen and (max-width:768px){} 2.@media screen and(min-width: 768px) and (max- width: 992px){} 3.@media screen and (min-width: 992px){}

10 Exemples de sites http://3200tigres.wwf.fr/