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 | 120 +++++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 files/ja/web/css/@media/-webkit-device-pixel-ratio/index.html (limited to 'files/ja/web/css/@media/-webkit-device-pixel-ratio') diff --git a/files/ja/web/css/@media/-webkit-device-pixel-ratio/index.html b/files/ja/web/css/@media/-webkit-device-pixel-ratio/index.html new file mode 100644 index 0000000000..f8a9df9419 --- /dev/null +++ b/files/ja/web/css/@media/-webkit-device-pixel-ratio/index.html @@ -0,0 +1,120 @@ +--- +title: '-webkit-device-pixel-ratio' +slug: Web/CSS/@media/-webkit-device-pixel-ratio +tags: + - '@media' + - CSS + - NeedsBrowserCompatibility + - Non-standard + - WebKit + - media feature +translation_of: Web/CSS/@media/-webkit-device-pixel-ratio +--- +
{{ CSSRef }} {{ Non-standard_header }}
+ +

CSS の -webkit-device-pixel-ratio 標準外の真偽値メディア特性は、標準のresolutionメディア特性の代替です。

+ +
+

注: このメディア特性は WebKit の機能です。可能であれば、代わりに resolution メディア特性クエリを使用してください。

+
+ +

構文

+ +

-webkit-device-pixel-ratio 特性は {{cssxref("<number>")}} 値で指定されます。これは範囲特性であり、つまり接頭辞が付いた -webkit-min-device-pixel-ratio 及び -webkit-max-device-pixel-ratio の変化形を使用して、それぞれ最低値と最高値をクエリすることもできます。

+ +

値

+ +
+
{{cssxref("<number>")}}
+
CSS の px を表すために使われるデバイスピクセルの数です。この値は <number> であり、構文的に単位を許可しておらず、暗黙の単位は dppx です。
+
+ +

実装

+ +
/* "dppx" の単位が含まれています。 */
+@media (-webkit-min-device-pixel-ratio: 2) { ... }
+/* ... は以下のものと同じです。 */
+@media (min-resolution: 2dppx) { ... }
+
+/* 同様に */
+@media (-webkit-max-device-pixel-ratio: 2) { ... }
+/* ... は以下のものと同じです。 */
+@media (max-resolution: 2dppx) { ... }
+
+ +

例

+ +

HTML

+ +
<p>This is a test of your device's pixel density.</p>
+
+ +

CSS

+ +
/* 正確な解像度 */
+@media (-webkit-device-pixel-ratio: 1) {
+  p {
+    color: red;
+  }
+}
+
+/* 最低解像度 */
+@media (-webkit-min-device-pixel-ratio: 1.1) {
+  p {
+    font-size: 1.5em;
+  }
+}
+
+/* 最高解像度 */
+@media (-webkit-max-device-pixel-ratio: 3) {
+  p {
+    background: yellow;
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Compat', '#css-media-queries-webkit-device-pixel-ratio', '-webkit-device-pixel-ratio')}}{{Spec2('Compat')}}初回の標準化
Safari CSS Reference
+ 'media query extensions' in that document.		標準外の非公式文書初回の文書化
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連項目

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