CSS@media @-規則は、一つまたは複数のメディアクエリの結果に基づいて、スタイルシートの一部を適用するために使用することができます。これによってメディアクエリを指定することができ、メディアクエリがコンテンツの使用される端末に一致する場合にのみ、文書に CSS のブロックを適用することができます。

メモ: JavaScript では、 @media を使用して作成されたルールは、 CSS オブジェクトモデルの CSSMediaRule インターフェイスによってアクセスすることができます。

構文

@media @-規則は、コードの最上位に配置したり、他の条件付きグループ @-規則の中に入れ子にして配置したりすることができます。

/* コードの最上位 */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* 他の条件付き@規則の中にネスト */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

メディアクエリの文法について詳しくは、メディアクエリの利用を参照してください。

形式文法

@media <media-query-list> {
  <group-rule-body>
}

where
<media-query-list> = <media-query>#

where
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?

where
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>

where
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>

where
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )

where
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>

where
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

メディア特性

メディア特性は、特定のユーザーエージェントや、出力端末や、環境などの特性を記述します。メディア特性式は、存在又は値を検査するもので、完全に任意です。それぞれのメディア特性式は、括弧で囲む必要があります。

名前 概要 備考
any-hover 入力メカニズムで、ユーザーが要素上でのホバーを使用することができるものあるか Media Queries Level 4 で追加。
any-pointer 入力メカニズムにポインティングデバイスがあるか、もしそうであればどれだけ正確なものであるか Media Queries Level 4 で追加。
aspect-ratio ビューポートの幅対高さのアスペクト比
color 出力端末の色コンポーネントあたりの色数、または端末がカラーでなければゼロ
color-gamut ユーザーエージェント及び出力端末が対応しているおよその色の範囲 Media Queries Level 4 で追加。
color-index 出力端末の色参照表の項目数、又は端末がそのような表を使用していないのであればゼロ
device-aspect-ratio 出力端末の幅対高さのアスペクト比 Media Queries Level 4 で非推奨。
device-height 出力端末のレンダリング面の高さ Media Queries Level 4 で非推奨。
device-width 出力端末のレンダリング面の幅 Media Queries Level 4 で非推奨。
display-mode ウェブアプリのマニフェストの display メンバーで指定されているアプリケーションの表示モード Web App Manifest 仕様書で定義
forced-colors ユーザーエージェントがカラーパレットを制限しているかどうかを検出する Media Queries Level 5 で追加。
grid 出力端末はグリッドとビットマップ画面のどちらを使用するか
height ビューポートの高さ
hover 主要な入力メカニズムで、ユーザーが要素上でのホバーを使用することができるか Media Queries Level 4 で追加。
inverted-colors ユーザーエージェントまたはその下の OS が色を反転しているか Media Queries Level 5 で追加。
light-level 環境の明るさレベル Media Queries Level 5 で追加。
monochrome 出力端末のモノクロフレームバッファーにおけるピクセルあたりのビット数、又は端末がモノクロでなければゼロ
orientation ビューポートの向き
overflow-block ビューポートをブロック軸方向にあふれたコンテンツを出力端末がどのように扱うか Media Queries Level 4 で追加。
overflow-inline ビューポートをインライン軸方向にあふれたコンテンツがスクロールできるか Media Queries Level 4 で追加。
pointer 主要な入力メカニズムがポインティングデバイスであるか、もしそうであればどれだけ正確なものであるか Media Queries Level 4 で追加。
prefers-color-scheme ユーザーが明るいまたは暗い色遣いを望んでいるかどうかを検出する Media Queries Level 5 で追加。
prefers-contrast ユーザーがシステムに隣り合う色のコントラスト量を増加または減少させるよう要求したかどうかを検出する Media Queries Level 5 で追加。
prefers-reduced-motion ユーザーがページであまり動きを望まないかどうか Media Queries Level 5 で追加。
prefers-reduced-transparency ユーザーが透明度を下げるよう望んでいるかどうか Media Queries Level 5 で追加。
resolution 出力端末のピクセル密度
scan 出力端末のスキャン処理方式
scripting スクリプト (例えば JavaScript) が利用できるかを検出する Media Queries Level 5 で追加。
update どれだけの頻度で出力端末がコンテンツの表示を変更できるか Media Queries Level 4 で追加。
width ビューポートの幅

@media print {
  body { font-size: 10pt; }
}

@media screen {
  body { font-size: 13px; }
}

@media screen, print {
  body { line-height: 1.2; }
}

@media only screen 
  and (min-width: 320px) 
  and (max-width: 480px)
  and (resolution: 150dpi) {
    body { line-height: 1.4; }
}

Media Queries Level 4 では、範囲を受け付ける特性を検査する際に、以下のようなより簡潔にメディアクエリを記述できる新しい範囲の構文が導入されました。

@media (height > 600px) {
    body { line-height: 1.4; }
}

@media (400px <= width <= 700px) {
    body { line-height: 1.4; }
}

他の例については、メディアクエリの利用をご覧ください。

アクセシビリティの考慮事項

サイトの文字の大きさを調整する人のために、メディアクエリ<length> が必要な時には em を使用してください。

em および px はどちらも有効な単位ですが、 em はユーザーがブラウザーのテキストの寸法を変更した場合によりうまく動作します。

また、ユーザーの使い勝手を向上させるために Level 4 のメディアクエリを使用することを検討してください。例えば、 prefers-reduced-motionユーザーがシステムにアニメーションや動きの量を最小化するよう要求していることを検出します

セキュリティ

メディアクエリはユーザーが作業する端末の能力—およびその先にある、特性および設計—を調べる関係上、端末を識別する「指紋」を構築するために不正利用されたり、ユーザーにとって望ましくない観点のものに分類されるものに利用されたりする可能性があります。

この可能性のため、ブラウザーは返値がコンピューターを正確に識別するために使用することを防ぐために、何らかの方法で返値を偽造することがあります。ブラウザーは、この分野で他の手段を提供する場合もあります。例えば、 Firefox で「フィンガープリントの採取」をブロックしている場合、多くのメディアクエリは実際の端末の状態を表す値ではなく既定値を報告します。

仕様書

仕様書 備考 フィードバック
Media Queries Level 5
@media の定義
Level 4 で除外された light-level, inverted-colors およびカスタムメディアクエリを復帰。
prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, prefers-color-scheme の各メディア特性を追加。
CSS Working Group drafts GitHub issues
CSS Conditional Rules Module Level 3
@media の定義
勧告候補 @media 規則の基本的な構文を定義。
Media Queries Level 4
@media の定義

メディア特性 scripting, pointer, hover, update, overflow-block, overflow-inline を追加。
screen, print, speech, all を除くすべてのメディアタイプを非推奨に指定。
構文をもっと柔軟にし、他の事の間に or キーワードを追加。

CSS Working Group drafts GitHub issues
Media Queries
@media の定義
CSS Level 2 (Revision 1)
@media の定義
初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
@mediaChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 6Opera 完全対応 9.2Safari 完全対応 1.3WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
any-hover media featureChrome 完全対応 41Edge 完全対応 16Firefox 完全対応 64IE 未対応 なしOpera 完全対応 28Safari 完全対応 9WebView Android 完全対応 41Chrome Android 完全対応 41Firefox Android 完全対応 64Opera Android 完全対応 28Safari iOS 完全対応 9.2Samsung Internet Android 完全対応 5.0
any-pointer media featureChrome 完全対応 41Edge 完全対応 12Firefox 完全対応 64IE 未対応 なしOpera 完全対応 28Safari 完全対応 9WebView Android 完全対応 41Chrome Android 完全対応 41Firefox Android 完全対応 64Opera Android 完全対応 28Safari iOS 完全対応 9.2Samsung Internet Android ?
aspect-ratio media featureChrome 完全対応 3Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 9Opera 完全対応 ありSafari 完全対応 4.1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 4.2Samsung Internet Android 完全対応 1.0
calc() expressionsChrome 完全対応 66Edge 未対応 なしFirefox 完全対応 59IE 未対応 なしOpera 完全対応 53Safari 完全対応 12WebView Android 完全対応 66Chrome Android 完全対応 66Firefox Android 完全対応 59Opera Android 完全対応 47Safari iOS 完全対応 12Samsung Internet Android 完全対応 あり
color media featureChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 2IE 完全対応 9Opera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
color-gamut media featureChrome 完全対応 58Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 45Safari 完全対応 10WebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 未対応 なしOpera Android 完全対応 43Safari iOS 完全対応 10Samsung Internet Android 完全対応 7.0
color-index media feature
非標準
Chrome 完全対応 29Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 16Safari 完全対応 8WebView Android 完全対応 ≤37Chrome Android 完全対応 29Firefox Android 未対応 なしOpera Android 完全対応 16Safari iOS 完全対応 8Samsung Internet Android 完全対応 2.0
device-aspect-ratio media feature
非推奨非標準
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 2IE 完全対応 9Opera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
device-height media feature
非推奨非標準
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 2IE 完全対応 9Opera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
device-width media feature
非推奨非標準
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 2IE 完全対応 9Opera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
display-mode media featureChrome 完全対応 45Edge 未対応 なしFirefox 完全対応 47
補足
完全対応 47
補足
補足 Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
IE 未対応 なしOpera 完全対応 32Safari 完全対応 13WebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 47
補足
完全対応 47
補足
補足 Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
Opera Android 完全対応 32Safari iOS 完全対応 13Samsung Internet Android 完全対応 5.0
grid media featureChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 2IE 完全対応 10Opera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
height media featureChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 2IE 完全対応 9Opera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
hover media featureChrome 完全対応 38
補足
完全対応 38
補足
補足 Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
Edge 完全対応 12Firefox 完全対応 64IE 未対応 なしOpera 完全対応 28Safari 完全対応 9WebView Android 完全対応 38
補足
完全対応 38
補足
補足 Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
Chrome Android 完全対応 50Firefox Android 完全対応 64Opera Android 完全対応 28Safari iOS 完全対応 9.2Samsung Internet Android ?
inverted-colors media feature
実験的非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 完全対応 9.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 完全対応 10Samsung Internet Android 未対応 なし
light-level media feature
実験的非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?
Media feature expressionsChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 9Opera 完全対応 9.2Safari 完全対応 1.3WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3.1Samsung Internet Android ?
Media query value supportChrome 完全対応 66Edge 未対応 なしFirefox 完全対応 59IE 未対応 なしOpera 完全対応 53Safari 未対応 なしWebView Android 完全対応 66Chrome Android 完全対応 66Firefox Android 完全対応 59Opera Android 完全対応 47Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
monochrome media featureChrome 完全対応 1Edge 未対応 なしFirefox 完全対応 2IE 未対応 なしOpera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
orientation media featureChrome 完全対応 3Edge 完全対応 12Firefox 完全対応 2IE 完全対応 9Opera 完全対応 ありSafari 完全対応 4.1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 4.2Samsung Internet Android 完全対応 1.0
overflow-block media feature
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 66IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 66Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
overflow-inline media feature
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 66IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 66Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
pointer media featureChrome 完全対応 41Edge 完全対応 12Firefox 完全対応 64IE 未対応 なしOpera 完全対応 28Safari 完全対応 9WebView Android 完全対応 41Chrome Android 完全対応 50Firefox Android 完全対応 64Opera Android 完全対応 28Safari iOS 完全対応 9.2Samsung Internet Android ?
prefers-color-scheme media feature
実験的
Chrome 完全対応 76Edge 未対応 なしFirefox 完全対応 67IE 未対応 なしOpera 未対応 なしSafari 完全対応 12.1WebView Android 完全対応 76Chrome Android 完全対応 76Firefox Android 完全対応 67Opera Android 未対応 なしSafari iOS 完全対応 13Samsung Internet Android ?
prefers-reduced-motion media feature
実験的
Chrome 完全対応 74Edge 未対応 なしFirefox 完全対応 63IE 未対応 なしOpera 完全対応 62Safari 完全対応 10.1WebView Android 完全対応 74Chrome Android 完全対応 74Firefox Android 完全対応 64Opera Android 完全対応 53Safari iOS 完全対応 10.3Samsung Internet Android ?
resolution media featureChrome 完全対応 29Edge 完全対応 12Firefox 完全対応 8
完全対応 8
部分対応 3.5
補足
補足 Supports <integer> values only.
IE 完全対応 9Opera 完全対応 16
完全対応 16
未対応 10 — 15
Safari 未対応 なし
補足
未対応 なし
補足
補足 See bug 78087.
WebView Android 完全対応 ≤37Chrome Android 完全対応 29Firefox Android 完全対応 8
完全対応 8
部分対応 4
補足
補足 Supports <integer> values only.
Opera Android 完全対応 16
完全対応 16
未対応 10.1 — 14
Safari iOS 未対応 なし
補足
未対応 なし
補足
補足 See bug 78087.
Samsung Internet Android 完全対応 1.5
scan media featureChrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android ? Safari iOS 未対応 なしSamsung Internet Android ?
scripting media feature
実験的非標準
Chrome 未対応 なし
補足
未対応 なし
補足
補足 See bug 489957.
Edge 未対応 なしFirefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1166581.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 489957.
Chrome Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 489957.
Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 1166581.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?
speech media typeChrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 9.2Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 完全対応 10.1Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
update media feature
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android ? Safari iOS 未対応 なしSamsung Internet Android ?
width media featureChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 2IE 完全対応 9Opera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
-moz-device-pixel-ratio media feature
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 4IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 4Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
-webkit-animation media feature
非推奨非標準
Chrome 未対応 2 — 36Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 ? — 23Safari 完全対応 4WebView Android 未対応 ≤37 — ≤37Chrome Android 未対応 18 — 36Firefox Android 未対応 なしOpera Android 未対応 ? — 24Safari iOS 完全対応 3.2Samsung Internet Android 未対応 1.0 — 3.0
-webkit-device-pixel-ratio media feature
非標準
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 63
補足
完全対応 63
補足
補足 Implemented as an alias for for -moz-device-pixel-ratio.
完全対応 49
補足 無効
補足 Implemented as an alias for for -moz-device-pixel-ratio.
無効 From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 45
補足 無効
補足 Implemented as an alias for for -moz-device-pixel-ratio.
無効 From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 63
補足
完全対応 63
補足
補足 Implemented as an alias for for -moz-device-pixel-ratio.
完全対応 49
補足 無効
補足 Implemented as an alias for for -moz-device-pixel-ratio.
無効 From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 45
補足 無効
補足 Implemented as an alias for for -moz-device-pixel-ratio.
無効 From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
-webkit-max-device-pixel-ratio media feature
非標準
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 63
補足
完全対応 63
補足
補足 Implemented as an alias for for max--moz-device-pixel-ratio.
完全対応 49
補足 無効
補足 Implemented as an alias for for max--moz-device-pixel-ratio.
無効 From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 45
補足 無効
補足 Implemented as an alias for for max--moz-device-pixel-ratio.
無効 From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 63
補足
完全対応 63
補足
補足 Implemented as an alias for for max--moz-device-pixel-ratio.
完全対応 49
補足 無効
補足 Implemented as an alias for for max--moz-device-pixel-ratio.
無効 From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 45
補足 無効
補足 Implemented as an alias for for max--moz-device-pixel-ratio.
無効 From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
-webkit-min-device-pixel-ratio media feature
非標準
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 63
補足
完全対応 63
補足
補足 Implemented as an alias for for min--moz-device-pixel-ratio.
完全対応 49
補足 無効
補足 Implemented as an alias for for min--moz-device-pixel-ratio.
無効 From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 45
補足 無効
補足 Implemented as an alias for for min--moz-device-pixel-ratio.
無効 From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 63
補足
完全対応 63
補足
補足 Implemented as an alias for for min--moz-device-pixel-ratio.
完全対応 49
補足 無効
補足 Implemented as an alias for for min--moz-device-pixel-ratio.
無効 From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 45
補足 無効
補足 Implemented as an alias for for min--moz-device-pixel-ratio.
無効 From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
-webkit-transform-2d media feature
非標準
Chrome 未対応 2 — 36Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 ? — 23Safari 完全対応 4WebView Android 未対応 ≤37 — ≤37Chrome Android 未対応 18 — 36Firefox Android 未対応 なしOpera Android 未対応 ? — 24Safari iOS 完全対応 3.2Samsung Internet Android 未対応 1.0 — 3.0
-webkit-transform-3d media feature
非標準
Chrome 未対応 2 — 36Edge 完全対応 12Firefox 完全対応 49
完全対応 49
完全対応 46
無効
無効 From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 ? — 23Safari 完全対応 4WebView Android 未対応 ≤37 — ≤37Chrome Android 未対応 18 — 36Firefox Android 完全対応 49
完全対応 49
完全対応 46
無効
無効 From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 ? — 24Safari iOS 完全対応 3.2Samsung Internet Android 未対応 1.0 — 3.0
-webkit-transition media feature
非推奨非標準
Chrome 未対応 2 — 36Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 ? — 23Safari 完全対応 4WebView Android 未対応 ≤37 — ≤37Chrome Android 未対応 18 — 36Firefox Android 未対応 なしOpera Android 未対応 ? — 24Safari iOS 完全対応 3.2Samsung Internet Android 未対応 1.0 — 3.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, mdnwebdocs-bot, SphinxKnight, takahashim, yyss, ethertank, Marsf
最終更新者: mfuji09,