---
title: '@media'
slug: Web/CSS/@media
translation_of: Web/CSS/@media
---
<p>{{CSSRef}}</p>

<h2 id="Resumen">Resumen</h2>

<p>La <a href="/es/docs/Web/CSS/At-rule" title="en/CSS/At-rule">regla-at</a> <a href="/es/docs/Web/CSS" title="CSS">CSS</a> <code>@media</code> asocia un grupo de declaraciones anidadas, en un bloque CSS delimitado por llaves, con una condición definida por un <a href="/es/docs/CSS/Media_queries" title="CSS media queries">media query</a>. La regla-at <code>@media</code> puede ser usada no solo en el nivel superior de la hoja de estilos, sino también dentro de cualquier <a href="/es/docs/Web/CSS/At-rule#Grupos_de_Reglas_Condicionales" title="en/CSS/At-rule#Conditional_Group_Rules">grupo de reglas conditionales</a>.</p>

<p>La regla-at <code>@media</code> puede ser accesible por medio de la interfaz de modelo de objeto {{domxref("CSSMediaRule")}}.</p>

<h2 id="Syntax" name="Syntax">Sintaxis</h2>

{{csssyntax}}

<p>Un <code>&lt;media-query&gt;</code> está compuesto por un tipo de medio opcional y/o un conjunto de características de medio.</p>

<h2 id="Media_types" name="Media_types">Tipos de medios</h2>

<dl>
 <dt>all</dt>
 <dd>Aplicable a todos los dispositivos.</dd>
 <dt>print</dt>
 <dd>Destinado material paginado y para documentos visibles en pantalla en modo de vista previa para impresión. Por favor, consulte la sección de <a href="/es/docs/Web/CSS/Paged_Media">medios paginados</a>, y la <a href="/es/docs/Web/CSS/Introducción/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">sección de Media en el tutorial de Introducción</a> para más información acerca de problemas de formateo específicos para los medios paginados.</dd>
 <dt>screen</dt>
 <dd>Destinado a principalmente a pantallas de computadora a color.</dd>
 <dt>speech</dt>
 <dd>Destinado a sintetizadores de voz. Nota: CSS2 tenía un tipo de medio similar llamado 'aural' para este propósito. Vea el apéndice sobre hojas de estilo aural para más detalles.</dd>
</dl>

<div class="note"><strong>Nota:</strong> CSS2.1 y Media Queries 3 definió varios tipos de media adicionales (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, <code>aural</code>), pero fueron descontinuados en <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a> y no deben ser usados.</div>

<h2 id="Media_features" name="Media_features">Características de Medios (media feature)</h2>

<p>Cada <em>característica de medios</em> verifica una característica específica del navegador o dispositivo.</p>

<table>
 <thead>
  <tr>
   <th>Nombre</th>
   <th>Resumen</th>
   <th>Notas</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/width"><code>width</code></a></td>
   <td>Anchura del viewport</td>
   <td> </td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/height"><code>height</code></a></td>
   <td>Altura del viewport</td>
   <td> </td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/aspect-ratio"><code>aspect-ratio</code></a></td>
   <td>Relación de aspecto anchura-altura del viewport</td>
   <td> </td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/orientation"><code>orientation</code></a></td>
   <td>Orientación del viewport</td>
   <td> </td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a></td>
   <td>Densidad de pixeles del dispositivo</td>
   <td> </td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/scan"><code>scan</code></a></td>
   <td>Proceso de escaneo del dispositivo</td>
   <td> </td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/grid"><code>grid</code></a></td>
   <td>¿El dispositivo es un grid o un mapa de bits?</td>
   <td> </td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/update-frequency"><code>update-frequency</code></a></td>
   <td>Qué tan rápido (si lo hace) puede el dispositivo modificar la apariencia del contenido</td>
   <td>Incluido en Media Queries Nivel 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/overflow-block"><code>overflow-block</code></a></td>
   <td>Cómo maneja el dispositivo el contenido que excede los límites del viewport a lo largo del eje de bloque</td>
   <td>Incluido en Media Queries Nivel 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/overflow-inline"><code>overflow-inline</code></a></td>
   <td>¿Puede desplazarse hacia el contenido que excede los límites del viewport?</td>
   <td>Incluido en Media Queries Nivel 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/color"><code>color</code></a></td>
   <td>Componente de número de bits por color del dispositivo, o cero si el dispositivo no es a color.</td>
   <td> </td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/color-index"><code>color-index</code></a></td>
   <td>Número de entradas en la tabla de búsqueda de color del dispositivo, o cero si el dispositivo no usa una tabla.</td>
   <td> </td>
  </tr>
  <tr>
   <td><code><a href="/en-US/docs/Web/CSS/@media/display-mode">display-mode</a></code></td>
   <td>Modo de visualización de la aplicación, según se especifique en la <a href="/es/docs/Web/Manifest#display">propiedad display</a> del manifiesto de la aplicación web.</td>
   <td>Definido en la <a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">especificación del Manifiesto de Aplicación Web</a>.</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/monochrome"><code>monochrome</code></a></td>
   <td>Bits por pixel en el buffer de marco monocromático del dispositivo, o 0 si el dispositivo no es monocromático.</td>
   <td> </td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/inverted-colors"><code>inverted-colors</code></a></td>
   <td>¿El agente usuario o el Sistema Operativo está invirtiendo los colores?</td>
   <td>Incluido en Media Queries Nivel 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/pointer"><code>pointer</code></a></td>
   <td>¿El mecanismo de entrada principal es un dispositivo apuntador? y de ser así, ¿qué tan preciso es?</td>
   <td>Incluido en Media Queries Nivel 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/hover"><code>hover</code></a></td>
   <td>¿El mecanismo de entrada principal permite que el usuario posicione el puntero sobre los elementos?</td>
   <td>Incluido en Media Queries Nivel 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/any-pointer"><code>any-pointer</code></a></td>
   <td>¿Hay algún mecanismo de entrada que sea dispositivo apuntador? y de ser así, ¿qué tan preciso es éste?</td>
   <td>Incluido en Media Queries Nivel 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/any-hover"><code>any-hover</code></a></td>
   <td>¿Algún mecanismo de entrada disponible permite que el usuario posicione el puntero sobre los elementos?</td>
   <td>Incluido en Media Queries Nivel 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/light-level"><code>light-level</code></a></td>
   <td>Nivel de luz ambiental actual</td>
   <td>Incluido en Media Queries Nivel 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/scripting"><code>scripting</code></a></td>
   <td>¿Se soporta lenguaje de script (p.ej. JavaScript)?</td>
   <td>Incluido en Media Queries Nivel 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/device-width"><code>device-width</code></a> {{obsolete_inline}}</td>
   <td>Anchura de la superficie de representación del dispositivo</td>
   <td>Descontinuado en Media Queries Nivel 4</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/device-height"><code>device-height</code></a> {{obsolete_inline}}</td>
   <td>Altura de la superficie de representación del dispositivo</td>
   <td>Descontinuado en Media Queries Nivel 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>Relación de aspecto anchura-altura del dispositivo</td>
   <td>Descontinuado en Media Queries Nivel 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>Número de pixeles reales del dispositivo por pixel CSS</td>
   <td>No estándar; Específica de WebKit/Blink. De ser posible, use la característica <code><a href="/en-US/docs/Web/CSS/@media/resolution">resolution</a> en su lugar</code>.</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>¿Se soportan {{cssxref("transform", "transformaciones")}} 3D?</td>
   <td>No estándar; Específica de WebKit/Blink</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>¿Se soportan {{cssxref("transform", "transformaciones")}} 2D?</td>
   <td>No estándar; Específica de WebKit</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transition"><code>-webkit-transition</code></a> {{non-standard_inline}}</td>
   <td>Se soportan {{cssxref("transition", "transiciones")}} CSS?</td>
   <td>No estándar; Específica de WebKit</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-animation"><code>-webkit-animation</code></a> {{non-standard_inline}}</td>
   <td>¿Se soportan {{cssxref("animation", "animaciones")}} CSS?</td>
   <td>No estándar; Específica de WebKit</td>
  </tr>
 </tbody>
</table>

<h2 id="Examples" name="Examples">Ejemplos</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="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentarios</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Compat', '#css-media-queries', 'CSS Media Queries')}}</td>
   <td>{{Spec2('Compat')}}</td>
   <td>Estandariza las características <code>-webkit-device-pixel-ratio</code> y <code>-webkit-transform-3d</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td>
   <td>{{Spec2('CSS3 Conditional')}}</td>
   <td>Define la sintaxis básica de la regla <code>@media</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
   <td>{{Spec2('CSS4 Media Queries')}}</td>
   <td>
    <p>Se agregan las características <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>light-level</code>, <code>update-frequency</code>, <code>overflow-block</code>, y <code>overflow-inline</code>.<br>
     Se descontinúan todos los tipos de medios excepto <code>screen</code>, <code>print</code>, <code>speech</code>, y <code>all</code>.</p>
   </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td>
   <td>{{Spec2('CSS3 Media Queries')}}</td>
   <td>Sin cambios.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Definición inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte básico (<code>all</code>, <code>print</code>, <code>screen</code>)</td>
   <td>1.0</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>9.2</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Media features (características de medios)</td>
   <td>1.0</td>
   <td>{{ CompatGeckoDesktop(1.7) }}</td>
   <td>9.0</td>
   <td>9.2</td>
   <td>1.3</td>
  </tr>
  <tr>
   <td>Característica <code>display-mode</code></td>
   <td>{{CompatUnknown}}</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>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico (<code>all</code>, <code>print</code>, <code>screen</code>)</td>
   <td>1.0</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>9.0</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Media features (características de medios)</td>
   <td>1.0</td>
   <td>{{ CompatGeckoMobile(1.7) }}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>9.0</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>Característica <code>display-mode</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Véase_también">Véase también</h2>

<ul>
 <li><a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Media queries</a></li>
 <li>El modelo CSSOM {{ domxref("CSSMediaRule") }} asociado a esta regla-at.</li>
</ul>