path: root/files/zh-tw/web/css/@media/index.html

---
title: '@media'
slug: Web/CSS/@media
tags:
  - At-rule
  - CSS
  - NeedsTranslation
  - Reference
  - TopicStub
translation_of: Web/CSS/@media
---
<p>{{CSSRef}}</p>

<h2 id="概要">概要</h2>

<p><code>@media</code> <a href="/zh-TW/CSS" title="CSS">CSS</a> <a href="/zh-TW/CSS/At-rule" title="zh-TW/CSS/At-rule">at-rule</a> 與一組被大括弧隔開、並由 <a href="/zh-TW/CSS/Media_queries" title="CSS media queries">media query</a> 條件定義的 CSS 巢狀區塊有關。<code>@media</code> at-rule 不只能用在最頂層的 CSS 區塊，也能在任何 <a href="/zh-TW/CSS/At-rule#Conditional_Group_Rules" title="zh-TW/CSS/At-rule#Conditional_Group_Rules">CSS conditional-group at-rule</a> 使用。</p>

<p><code>@media</code> at-rule 能透過 CSS object model 介面 {{domxref("CSSMediaRule")}} 通行。</p>

<h2 id="Syntax" name="Syntax">語法</h2>

{{csssyntax}}

<p>A <code>&lt;media-query&gt;</code> is composed of a optional media type and/or a number of media features.</p>

<h2 id="Media_types" name="Media_types">Media types</h2>

<dl>
 <dt>all</dt>
 <dd>Suitable for all devices.</dd>
 <dt>print</dt>
 <dd>Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on <a href="/en/CSS/Paged_Media" title="https://developer.mozilla.org/en/CSS/Paged_Media">paged media</a>, and the <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">media section of the Getting Started tutorial</a> for information about formatting issues that are specific to paged media.</dd>
 <dt>screen</dt>
 <dd>Intended primarily for color computer screens.</dd>
 <dt>speech</dt>
 <dd>Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.</dd>
</dl>

<div class="note"><strong>Note:</strong> CSS2.1 and Media Queries 3 defined several additional media types (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, <code>aural</code>), but they were deprecated in <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a> and shouldn't be used.</div>

<h2 id="Media_features" name="Media_features">Media Features</h2>

<p>Each <em>media feature</em> tests for one specific feature of the browser or device.</p>

<table>
 <thead>
  <tr>
   <th>Name</th>
   <th>Summary</th>
   <th>Notes</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/width"><code>width</code></a></td>
   <td>Viewport width</td>
   <td> </td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/height"><code>height</code></a></td>
   <td>Viewport height</td>
   <td> </td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/aspect-ratio"><code>aspect-ratio</code></a></td>
   <td>Width-to-height aspect ratio of the viewport</td>
   <td> </td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/orientation"><code>orientation</code></a></td>
   <td>Orientation of the viewport</td>
   <td> </td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a></td>
   <td>Pixel density of the output device</td>
   <td> </td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/scan"><code>scan</code></a></td>
   <td>Scanning process of the output device</td>
   <td> </td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/grid"><code>grid</code></a></td>
   <td>Is the device a grid or bitmap?</td>
   <td> </td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/update-frequency"><code>update-frequency</code></a></td>
   <td>How quickly (if at all) can the output device modify the appearance of the content</td>
   <td>Added in Media Queries Level 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/overflow-block"><code>overflow-block</code></a></td>
   <td>How does the output device handle content that overflows the viewport along the block axis?</td>
   <td>Added in Media Queries Level 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/overflow-inline"><code>overflow-inline</code></a></td>
   <td>Can content that overflows the viewport along the inline axis be scrolled?</td>
   <td>Added in Media Queries Level 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/color"><code>color</code></a></td>
   <td>Number of bits per color component of the output device, or zero if the device isn't color.</td>
   <td> </td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/color-index"><code>color-index</code></a></td>
   <td>Number of entries in the output device's color lookup table, or zero if the device does not use such a table.</td>
   <td> </td>
  </tr>
  <tr>
   <td><code><a href="/en-US/docs/Web/CSS/@media/display-mode">display-mode</a></code></td>
   <td>The display mode of the application, as specified in the web app manifest's <a href="/en-US/docs/Web/Manifest#display">display member</a>.</td>
   <td>Defined in the <a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">Web App Manifest spec</a>.</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/monochrome"><code>monochrome</code></a></td>
   <td>Bits per pixel in the output device's monochrome frame buffer, or 0 if the device is not monochrome.</td>
   <td> </td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/inverted-colors"><code>inverted-colors</code></a></td>
   <td>Is the user agent or underlying OS inverting colors?</td>
   <td>Added in Media Queries Level 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/pointer"><code>pointer</code></a></td>
   <td>Is the primary input mechanism a pointing device, and if so, how accurate is it?</td>
   <td>Added in Media Queries Level 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/hover"><code>hover</code></a></td>
   <td>Does the primary input mechanism allow the user to hover over elements?</td>
   <td>Added in Media Queries Level 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/any-pointer"><code>any-pointer</code></a></td>
   <td>Is any available input mechanism a pointing device, and if so, how accurate is it?</td>
   <td>Added in Media Queries Level 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/any-hover"><code>any-hover</code></a></td>
   <td>Does any available input mechanism allow the user to hover over elements?</td>
   <td>Added in Media Queries Level 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/light-level"><code>light-level</code></a></td>
   <td>Current ambient light level</td>
   <td>Added in Media Queries Level 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/scripting"><code>scripting</code></a></td>
   <td>Is scripting (e.g. JavaScript) available?</td>
   <td>Added in Media Queries Level 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/device-width"><code>device-width</code></a> {{obsolete_inline}}</td>
   <td>Width of the rendering surface of the output device</td>
   <td>Deprecated in Media Queries Level 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/device-height"><code>device-height</code></a> {{obsolete_inline}}</td>
   <td>Height of the rendering surface of the output device</td>
   <td>Deprecated in Media Queries Level 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/device-aspect-ratio"><code>device-aspect-ratio</code></a> {{obsolete_inline}}</td>
   <td>Width-to-height aspect ratio of the output device</td>
   <td>Deprecated in Media Queries Level 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio"><code>-webkit-device-pixel-ratio</code></a> {{non-standard_inline}}</td>
   <td>Number of physical device pixels per CSS pixel</td>
   <td>Nonstandard; WebKit/Blink-specific. If possible, use the <a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a> media feature instead.</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-3d"><code>-webkit-transform-3d</code></a> {{non-standard_inline}}</td>
   <td>Are CSS 3D {{cssxref("transform")}}s supported?</td>
   <td>Nonstandard; WebKit/Blink-specific</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-2d"><code>-webkit-transform-2d</code></a> {{non-standard_inline}}</td>
   <td>Are CSS 2D {{cssxref("transform")}}s supported?</td>
   <td>Nonstandard; WebKit-specific</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transition"><code>-webkit-transition</code></a> {{non-standard_inline}}</td>
   <td>Are CSS {{cssxref("transition")}}s supported?</td>
   <td>Nonstandard; WebKit-specific</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-animation"><code>-webkit-animation</code></a> {{non-standard_inline}}</td>
   <td>Are CSS {{cssxref("animation")}}s supported?</td>
   <td>Nonstandard; WebKit-specific</td>
  </tr>
 </tbody>
</table>

<h2 id="Examples" name="Examples">Examples</h2>

<pre class="brush: css">@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-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    body { line-height: 1.4 }
}
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Compat', '#css-media-queries', 'CSS Media Queries')}}</td>
   <td>{{Spec2('Compat')}}</td>
   <td>Standardizes the <code>-webkit-device-pixel-ratio</code> and <code>-webkit-transform-3d</code> media features.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td>
   <td>{{Spec2('CSS3 Conditional')}}</td>
   <td>Defines the basic syntax of the <code>@media</code> rule.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
   <td>{{Spec2('CSS4 Media Queries')}}</td>
   <td>
    <p>Added <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>light-level</code>, <code>update-frequency</code>, <code>overflow-block</code>, and <code>overflow-inline</code> media features.<br>
     Deprecated all media types except for <code>screen</code>, <code>print</code>, <code>speech</code>, and <code>all</code>.<br>
     Made the syntax more flexible by adding, among other things, the <code>or</code> keyword.</p>
   </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td>
   <td>{{Spec2('CSS3 Media Queries')}}</td>
   <td>No change.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support (<code>all</code>, <code>print</code>, <code>screen</code>)</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoDesktop(1.7) }}</td>
   <td>6.0</td>
   <td>9.2</td>
   <td>1.3</td>
  </tr>
  <tr>
   <td><code>speech</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>9.2</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Media features</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoDesktop(1.7) }}</td>
   <td>9.0</td>
   <td>9.2</td>
   <td>1.3</td>
  </tr>
  <tr>
   <td><code>display-mode</code> media feature</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatGeckoDesktop(47) }}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support (<code>all</code>, <code>print</code>, <code>screen</code>)</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoMobile(1.7) }}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>9.0</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td><code>speech</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>9.0</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Media features</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoMobile(1.7) }}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>9.0</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td><code>display-mode</code> media feature</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li><a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Media queries</a></li>
 <li>The CSSOM {{ domxref("CSSMediaRule") }} associated with this at-rule.</li>
</ul>