Media Queries: Difference between revisions
Jump to navigation
Jump to search
(Created page with "https://developer.mozilla.org/fr/docs/Web/CSS/Media_queries "Une media query (ou requête média) consiste en un type de média, et au moins une expression limitant la porté...") |
No edit summary |
||
| Line 3: | Line 3: | ||
"Une media query (ou requête média) consiste en un type de média, et au moins une expression limitant la portée des déclarations CSS, en mettant à profit les particularités des supports multimédias comme leur largeur, leur hauteur ou leur affichage des couleurs. Ajouté dans CSS3, les media queries permettent d'adapter la présentation du contenu à une large gamme d'appareils sans changer le contenu lui-même." |
"Une media query (ou requête média) consiste en un type de média, et au moins une expression limitant la portée des déclarations CSS, en mettant à profit les particularités des supports multimédias comme leur largeur, leur hauteur ou leur affichage des couleurs. Ajouté dans CSS3, les media queries permettent d'adapter la présentation du contenu à une large gamme d'appareils sans changer le contenu lui-même." |
||
Exemple (from https://developer.mozilla.org/fr/docs/Web/CSS/Media_queries) |
|||
<pre> |
|||
<!-- Media Query CSS dans un élément link --> |
|||
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> |
|||
<!-- Media Query CSS dans une feuille de style --> |
|||
<style> |
|||
@media (max-width: 600px) { |
|||
.facet_sidebar { |
|||
display: none; |
|||
} |
|||
} |
|||
@media tv and (min-width: 700px) and (orientation: landscape) {…} |
|||
| ⚫ | |||
@media not all and (monochrome) { ... } |
|||
</style> |
|||
</pre> |
|||
| ⚫ | |||
* http://mediaqueri.es/ |
* http://mediaqueri.es/ |
||
Latest revision as of 08:42, 4 September 2014
https://developer.mozilla.org/fr/docs/Web/CSS/Media_queries
"Une media query (ou requête média) consiste en un type de média, et au moins une expression limitant la portée des déclarations CSS, en mettant à profit les particularités des supports multimédias comme leur largeur, leur hauteur ou leur affichage des couleurs. Ajouté dans CSS3, les media queries permettent d'adapter la présentation du contenu à une large gamme d'appareils sans changer le contenu lui-même."
Exemple (from https://developer.mozilla.org/fr/docs/Web/CSS/Media_queries)
<!-- Media Query CSS dans un élément link -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- Media Query CSS dans une feuille de style -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
@media tv and (min-width: 700px) and (orientation: landscape) {…}
@media not all and (monochrome) { ... }
</style>
Exemples de sites: