aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/css/@media/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/pt-br/web/css/@media/index.html')
-rw-r--r--files/pt-br/web/css/@media/index.html446
1 files changed, 446 insertions, 0 deletions
diff --git a/files/pt-br/web/css/@media/index.html b/files/pt-br/web/css/@media/index.html
new file mode 100644
index 0000000000..18c46ee615
--- /dev/null
+++ b/files/pt-br/web/css/@media/index.html
@@ -0,0 +1,446 @@
+---
+title: '@media'
+slug: Web/CSS/@media
+tags:
+ - '@media'
+ - At-rule
+ - CSS
+ - NeedsTranslation
+ - Reference
+ - TopicStub
+translation_of: Web/CSS/@media
+---
+<div>{{CSSRef}}</div>
+
+<p>The <strong><code>@media</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule </a><font><font> pode ser usada para aplicar estilos com base no resultado de uma ou mais consultas de mídia, que testam o tipo, as características específicas e o ambiente de um dispositivo.</font></font></p>
+
+<p>No CSS, a regra <code>@media</code> deve ser posta na parte superior do seu código ou aninhada dentro de algum outro <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">conditional group at-rule</a>.</p>
+
+<pre class="brush: css no-line-numbers">/* Media query */
+@media screen and (min-width: 900px) {
+ article {
+  padding: 1rem 3rem;
+  }
+}
+
+/* Nested media query */
+@supports (display: flex) {
+  @media screen and (min-width: 900px) {
+  article {
+  display: flex;
+  }
+ }
+}
+</pre>
+
+<p>Besides its use in the <code>@media</code> rule, a media query may also be applied to an HTML {{HTMLElement("link")}} element to restrict an entire style sheet to certain media.</p>
+
+<pre class="brush: html no-line-numbers">&lt;!-- Media-dependent style sheet included in HTML --&gt;
+&lt;link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen-styles.css" /&gt;</pre>
+
+<p>In JavaScript, <code>@media</code> can be accessed via the {{domxref("CSSMediaRule")}} CSS object model interface.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<p>The <code>@media</code> at-rule is composed of one or more media queries, each of which consists of an optional <a href="#Media_types">media type</a> and any number of <a href="#Media_features">media feature</a> expressions. Multiple queries can be combined in various ways by using <a href="#Logical_operators">logical operators</a>, and are case-insensitive.</p>
+
+<p>Corresponding styles are applied only if a media query computes to true, i.e., when the specified media type matches the type of device the document is being displayed on <em>and</em> all media feature expressions compute as true. Queries involving unknown media types are always false.</p>
+
+<div class="note">
+<p><strong>Note:</strong> A style sheet with a media query attached to its {{HTMLElement("link")}} tag <a href="http://scottjehl.github.com/CSS-Download-Tests/">will still download</a> even if the query returns false. Nevertheless, its contents will not apply unless and until the result of the query changes to true.</p>
+</div>
+
+<h3 id="Media_types" name="Media_types">Media types</h3>
+
+<p><em>Media types</em> describe the general category of a device. Unless you use the <code>not</code> or <code>only</code> logical operators, the media type is optional and the <code>all</code> type will be implied.</p>
+
+<dl>
+ <dt><code>all</code></dt>
+ <dd>Suitable for all devices.</dd>
+ <dt><code>print</code></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><code>screen</code></dt>
+ <dd>Intended primarily for color computer screens.</dd>
+ <dt><code>speech</code></dt>
+ <dd>Intended for speech synthesizers.</dd>
+</dl>
+
+<div class="note"><strong>Deprecated media types:</strong> CSS2.1 and <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> defined several additional media types (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, and <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. The <code>aural</code> type has been replaced by <code>speech</code>, which is similar.</div>
+
+<h3 id="Media_features" name="Media_features">Media features</h3>
+
+<p><em>Media feature expressions</em> test for specific characteristics of the {{glossary("user agent")}}, output device, or environment. They are entirely optional. Each media feature expression must be surrounded by parentheses.</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>Width of the viewport</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td><a href="/en-US/docs/Web/CSS/@media/height"><code>height</code></a></td>
+ <td>Height of the viewport</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>Does the device use a grid or bitmap screen?</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td><a href="/en-US/docs/Web/CSS/@media/update-frequency"><code>update</code></a></td>
+ <td>How frequently the output device can modify the appearance of 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><code><a href="/en-US/docs/Web/CSS/@media/color-gamut">color-gamut</a></code></td>
+ <td>Approximate range of colors that are supported by the user agent and output device</td>
+ <td>Added in Media Queries Level 4.</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"><code>display</code></a> member</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 zero if the device isn't 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>Deferred to Media Queries Level 5.</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>Light level of the environment</td>
+ <td>Deferred to Media Queries Level 5.</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>Deferred to Media Queries Level 5.</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. If possible, use {{cssxref("@supports")}} instead.</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. If possible, use {{cssxref("@supports")}} instead.</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. If possible, use {{cssxref("@supports")}} instead.</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. If possible, use {{cssxref("@supports")}} instead.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="Logical_operators">Logical operators</h3>
+
+<p>The <em>logical operators</em> <code>not</code>, <code>and</code>, and <code>only</code> can be used to compose a complex media query. You can also combine multiple media queries into a single rule using a comma-separated list.</p>
+
+<h4 id="and"><code>and</code></h4>
+
+<p>The <code>and</code> operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. It is also used for joining media features with media types.</p>
+
+<h4 id="not"><code>not</code></h4>
+
+<p>The <code>not</code> operator is used to negate a media query, returning true if the query would otherwise return false. If present in a comma-separated list, it will only negate the specific query to which it is applied. If you use the <code>not</code> operator, you <em>must</em> specify an explicit media type.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The <code>not</code> keyword can't be used to negate an individual feature expression, only an entire media query.</p>
+</div>
+
+<h4 id="only"><code>only</code></h4>
+
+<p>The <code>only</code> operator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles. If you use the <code>only</code> operator, you <em>must</em> specify an explicit media type.</p>
+
+<h4 id="comma-separated_lists">comma-separated lists</h4>
+
+<p>Each query in a comma-separated media query list is treated separately from the others. If any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like the logical operator <code>or</code>.</p>
+
+<h3 id="Examples" name="Examples">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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>
+
+<p>For more media feature examples, please see the reference page for each specific feature. For more logical operator examples, please see <a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Using media queries</a>.</p>
+
+<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>Adds <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>
+ Deprecates all media types except for <code>screen</code>, <code>print</code>, <code>speech</code>, and <code>all</code>.<br>
+ Makes 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) }}<sup>[1]</sup></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>{{CompatGeckoMobile(47)}}<sup>[1]</sup></td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Only the <code>fullscreen</code> and <code>browser</code> values of <code>display-mode</code> were supported in 47. <code>minimal-ui</code> and <code>standalone</code> were added in Firefox 57.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Using media queries</a></li>
+ <li>In JavaScript, <code>@media</code> can be accessed via the CSS object model interface {{domxref("CSSMediaRule")}}.</li>
+</ul>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2025-01-05 21:29:50 +0000