From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../@media/-webkit-device-pixel-ratio/index.html | 119 +++++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html (limited to 'files/fr/web/css/@media/-webkit-device-pixel-ratio') diff --git a/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html new file mode 100644 index 0000000000..189f3d58b7 --- /dev/null +++ b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html @@ -0,0 +1,119 @@ +--- +title: '-webkit-device-pixel-ratio' +slug: Web/CSS/@media/-webkit-device-pixel-ratio +tags: + - CSS + - Caractéristique média + - Non-standard + - Reference +translation_of: Web/CSS/@media/-webkit-device-pixel-ratio +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

-webkit-device-pixel-ratio est une caractéristique média non-standard, alternative à la caractéristique média standard {{cssxref("@media/resolution","resolution")}}.

+ +

Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter un pixel CSS (px). Bien que la valeur soit de type {{cssxref("<number>")}}, sans unité donc, l'unité implicite est dppx.

+ +
+

Attention ! Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.

+
+ +

Syntaxe

+ +

-webkit-device-pixel-ratio est une valleur décrivant un intervalle. On peut également utiliser -webkit-min-device-pixel-ratio et -webkit-max-device-pixel-ratio pour fixer un seuil minimum/maximum.

+ +

Valeurs

+ +
+
{{cssxref("<number>")}}
+
Le nombre de pixels physiques pour chaque pixel (px) CSS. Bien que la valeur soit un nombre et ne permette pas d'utiliser des unités, l'unité implicite est dppx.
+
+ +

Implémentation

+ +
/* Unité dppx implicite */
+@media (-webkit-min-device-pixel-ratio: 2) { ... }
+/* équivalent à */
+@media (min-resolution: 2dppx) { ... }
+
+/* De même */
+@media (-webkit-max-device-pixel-ratio: 2) { ... }
+/* équivalent à */
+@media (max-resolution: 2dppx) { ... }
+
+ +

Exemples

+ +

CSS

+ +
/* Résolution exacte */
+@media (-webkit-device-pixel-ratio: 1) {
+  p {
+    color: red;
+  }
+}
+
+/* Résolution minimale */
+@media (-webkit-min-device-pixel-ratio: 1.1) {
+  p {
+    font-size: 1.5em;
+  }
+}
+
+/* Résolution maximale */
+@media (-webkit-max-device-pixel-ratio: 3) {
+  p {
+    background: yellow;
+  }
+}
+ +

HTML

+ +
<p>Voici un test pour la densité de pixel de votre appareil.</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Compat', '#css-media-queries-webkit-device-pixel-ratio', '-webkit-device-pixel-ratio')}}{{Spec2('Compat')}}Définition initiale dans un standard.
Safari CSS Reference
+ 'media query extensions' in that document.		Documentation non-officielle, non-standard.Documentation initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.-webkit-device-pixel-ratio")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf