View
109
Download
0
Category
Preview:
Citation preview
CSS3 Font Face
Utiliser des polices de caractère non standard
L’attribut media avant CSS31. <!doctype html>
2. <head>
3. <meta charset="utf-8">
4. <title>Media Queries !</title>
5. <link rel="stylesheet" media="screen" href="screen.css" type="text/css" />
6. <link rel="stylesheet" media="print" href="print.css" type="text/css" />
7. </head>
8. <body> ... </body>
L’attribut media avant CSS31./* 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.}
Ce qui change avec CSS3 Possibilité de ciblage étendues
Largeur et hauteur de l’appareil 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 l’appareil (16/9 , 4/3 par exemple) aspect-ratio
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 */}
Le problème du viewport sur mobile
Affichage avec le viewport par défaut
Le problème du viewport sur mobile1.<!doctype html>
2.<head>
3.<meta charset="utf-8">
4.<title>Media Queries !</title>
5.
6.<meta name="viewport" content="initial-scale=1.0">
7.
8.</head>
9.<body>
10....
11.</body>
les points de rupture telephone
width < 768px tablette
width >= 768 et =< 992 ordi de bureau
width >= 992
les points de rupture1.@media screen and (max-width:768px){}
2.@media screen and(min-width: 768px) and (max-width: 992px){}
3.@media screen and (min-width: 992px){}
Recommended