aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/css/@media
diff options
context:
space:
mode:
Diffstat (limited to 'files/es/web/css/@media')
-rw-r--r--files/es/web/css/@media/altura/index.html82
-rw-r--r--files/es/web/css/@media/color/index.html80
-rw-r--r--files/es/web/css/@media/display-mode/index.html90
-rw-r--r--files/es/web/css/@media/hover/index.html70
-rw-r--r--files/es/web/css/@media/index.html360
-rw-r--r--files/es/web/css/@media/pointer/index.html101
-rw-r--r--files/es/web/css/@media/resolución/index.html88
-rw-r--r--files/es/web/css/@media/width/index.html124
8 files changed, 995 insertions, 0 deletions
diff --git a/files/es/web/css/@media/altura/index.html b/files/es/web/css/@media/altura/index.html
new file mode 100644
index 0000000000..7cb29fe768
--- /dev/null
+++ b/files/es/web/css/@media/altura/index.html
@@ -0,0 +1,82 @@
+---
+title: Altura
+slug: Web/CSS/@media/altura
+tags:
+ - '@media'
+ - CSS
+ - Media Queries
+ - Referencia
+ - características media
+translation_of: Web/CSS/@media/height
+---
+<div>{{cssref}}</div>
+
+<p>Las <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">media feature (consulta de medios) </a><strong><code>height</code></strong> puede ser usada para aplicar estilos basados en la altura del {{glossary("viewport")}} (o la caja de la página, para <a href="/en-US/docs/Web/CSS/Paged_media">paged media</a>).</p>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<p>La característica <code>height</code> es especificada como un valor {{cssxref("&lt;length&gt;")}} representando la altura de la vista (viewport). Es una característica en rangos, lo que siginifica que puede ser prefijada con las variantes <strong><code>min-height</code></strong> y <code><strong>max-height</strong></code> para consultar valores mínimos y máximos, respectivamente.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Watch this element as you resize your viewport's height.&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Altura exacta */
+@media (height: 360px) {
+ div {
+ color: red;
+ }
+}
+
+/* Altura mínima */
+@media (min-height: 25rem) {
+ div {
+ background: yellow;
+ }
+}
+
+/* Altura máxima */
+@media (max-height: 40rem) {
+ div {
+ border: 2px solid blue;
+ }
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Example','90%')}}</p>
+
+<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">Comentario</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('CSS4 Media Queries', '#height', 'height')}}</td>
+ <td>{{Spec2('CSS4 Media Queries')}}</td>
+ <td>El valor ahora puede ser negativo, en cuyo caso se calcula como negativo.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS3 Media Queries', '#height', 'height')}}</td>
+ <td>{{Spec2('CSS3 Media Queries')}}</td>
+ <td>Definición inicial. El valor debe ser positivo.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.height")}}</p>
diff --git a/files/es/web/css/@media/color/index.html b/files/es/web/css/@media/color/index.html
new file mode 100644
index 0000000000..462a566a07
--- /dev/null
+++ b/files/es/web/css/@media/color/index.html
@@ -0,0 +1,80 @@
+---
+title: color
+slug: Web/CSS/@media/color
+tags:
+ - CSS
+ - Referencia
+translation_of: Web/CSS/@media/color
+---
+<p><strong><code>color</code></strong> es una característica CSS relativa al medio de presentación cuyo valor es un  <a href="/en-US/docs/Web/CSS/integer"><code>&lt;integer&gt;</code></a> que contiene el número de bits por componente de color en el dispositivo de salida, o cero si el dispositivivo no es en color.</p>
+
+<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">Comentario</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('CSS3 Media Queries', '#color', 'color')}}</td>
+ <td>{{Spec2('CSS3 Media Queries')}}</td>
+ <td>Definición Inicial</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con los distintos 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</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatUnknown() }}</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</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>{{ CompatUnknown() }}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/es/web/css/@media/display-mode/index.html b/files/es/web/css/@media/display-mode/index.html
new file mode 100644
index 0000000000..91b1d2cce4
--- /dev/null
+++ b/files/es/web/css/@media/display-mode/index.html
@@ -0,0 +1,90 @@
+---
+title: display-mode
+slug: Web/CSS/@media/display-mode
+tags:
+ - '@media'
+ - CSS
+ - Media Queries
+ - Referencia
+ - características de medio
+ - consultas de medio
+ - display
+ - display-mode
+ - media feature
+translation_of: Web/CSS/@media/display-mode
+---
+<div>{{cssref}}</div>
+
+<p>La <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">característica de medios (media feature) de CSS</a> <strong><code>display-mode</code></strong> puede ser utilizada para probar el modo de visualización de una aplicación. Puede ser usada para proveer de una experiencia de usuario consistente entre el lanzamiento de un sitio desde una URL y desde un ícono del escritorio.</p>
+
+<p>La característica corresponde al miembro <a href="/en-US/docs/Web/Manifest#display"><code>display</code></a> del manifiesto de la aplicación web. Ambos aplican al contexto de navegación de nivel más alto y a cualquier hijo del contexto de navegación. La característica de consulta aplica sin importar si el manifiesto de la aplicación web esta presente</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La característica <code>display-mode</code> se especifica como un valor de palabra clave elegida de la siguiente lista.</p>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Modo de visualización</th>
+ <th scope="col">Descripción</th>
+ <th scope="col"><code>Modo de visualización de reserva</code></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>fullscreen</code></td>
+ <td>Toda la área disponible de desplegado es usada y ningún agente de usuario {{glossary("chrome")}} es mostrado.</td>
+ <td><code>standalone</code></td>
+ </tr>
+ <tr>
+ <td><code>standalone</code></td>
+ <td>La aplicación se vera y sentira como una aplicación independiente. Esto puede incluir que la aplicación tenga una ventana diferente, su propio ícono en el lanzador de aplicaciones, etc. En este modo, el agente de usuario excluirá elementos UI paara controlar la navegación, pero puede incluir otros elementos UI como la barra de estado.</td>
+ <td><code>minimal-ui</code></td>
+ </tr>
+ <tr>
+ <td><code>minimal-ui</code></td>
+ <td>La aplicación se vera y sentira como una apicación autónoma, pero tendra un conjunto mínimo de elementos UI para controlar la navegación. Los elementos pueden variar por navegador.</td>
+ <td><code>browser</code></td>
+ </tr>
+ <tr>
+ <td><code>browser</code></td>
+ <td>La aplicación se abre en una pestaña o nueva ventana convencional del navegador, dependiendo del navegador y la plataforma.</td>
+ <td>(none)</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: css">@media all and (display-mode: fullscreen) {
+ body {
+ margin: 0;
+ border: 5px solid black;
+ }
+}</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">Comentario</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}}</td>
+ <td>{{Spec2('Manifest')}}</td>
+ <td>Definición inicial.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.display-mode")}}</p>
diff --git a/files/es/web/css/@media/hover/index.html b/files/es/web/css/@media/hover/index.html
new file mode 100644
index 0000000000..770d2e7494
--- /dev/null
+++ b/files/es/web/css/@media/hover/index.html
@@ -0,0 +1,70 @@
+---
+title: hover
+slug: Web/CSS/@media/hover
+tags:
+ - '@media'
+ - CSS
+ - Consulta de medios
+ - Media Queires
+ - Referencia
+ - característica de medios
+ - media feature
+translation_of: Web/CSS/@media/hover
+---
+<div>{{cssref}}</div>
+
+<p>La <a href="/en-US/docs/CSS">característica de medios CSS</a> <strong><code>hover</code></strong>, puede se utilizada para probar si el mecanismo de entrada primario de un usuario puede flotar sobre los elementos.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La característica <font face="consolas, Liberation Mono, courier, monospace">hover</font> es especificada como un valor de palabra clave elegida de la siguiente lista.</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>El mecanismo de entrada primario no puede flotar o no puede convenientemente flotar (es decir, algunos dispositivos mobiles emulan la flotación cuando el usuario presiona inconvenientemente por bastante rato la pantalla), o no hay mecanismo de puntero primario.</dd>
+ <dt><code>hover</code></dt>
+ <dd>El mecanismo de entrada primario puede convenientemente flotar sobre los elementos.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="#"&gt;Try hovering over me!&lt;/a&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@media (hover: hover) {
+ a:hover {
+ background: yellow;
+ }
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<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">Comentario</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('CSS4 Media Queries', '#hover', 'hover')}}</td>
+ <td>{{Spec2('CSS4 Media Queries')}}</td>
+ <td>Definición inicial.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.hover")}}</p>
diff --git a/files/es/web/css/@media/index.html b/files/es/web/css/@media/index.html
new file mode 100644
index 0000000000..05e5f6ec5a
--- /dev/null
+++ b/files/es/web/css/@media/index.html
@@ -0,0 +1,360 @@
+---
+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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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>
diff --git a/files/es/web/css/@media/pointer/index.html b/files/es/web/css/@media/pointer/index.html
new file mode 100644
index 0000000000..f7fca78ca6
--- /dev/null
+++ b/files/es/web/css/@media/pointer/index.html
@@ -0,0 +1,101 @@
+---
+title: pointer
+slug: Web/CSS/@media/pointer
+translation_of: Web/CSS/@media/pointer
+---
+<div>{{cssref}}</div>
+
+<p>La <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">caracteristica</a> <strong><code>pointer</code></strong> <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS">CSS</a> comprueba si el usuario tiene un dispositivo de puntero (como el ratón), y si es así, cuán preciso es el dispositivo de puntero primario.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Si quieres comprobar la precisión de cualquier dispositivo apuntador, usa <code><a href="/en-US/docs/Web/CSS/@media/any-pointer">any-pointer</a></code> en su lugar.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La propiedad <code>pointer</code> se especifica como un valor de palabra clave elegido de la lista que figura a continuación.</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>El mecanismo de entrada principal no incluye un dispositivo apuntador.</dd>
+ <dt><code>coarse</code></dt>
+ <dd>El mecanismo primario de entrada incluye un dispositivo de apuntamiento de precisión limitada.</dd>
+ <dt><code>fine</code></dt>
+ <dd>El mecanismo de entrada principal incluye un dispositivo de apuntamiento preciso.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este ejemplo crea una pequeño checkbox para los usuarios con punteros primarios finos y un gran checkbox para los usuarios con punteros primarios gruesos.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input id="test" type="checkbox" /&gt;
+&lt;label for="test"&gt;Mírame!&lt;/label&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type="checkbox"] {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ border: solid;
+ margin: 0;
+}
+
+input[type="checkbox"]:checked {
+ background: gray;
+}
+
+@media (pointer: fine) {
+ input[type="checkbox"] {
+ width: 15px;
+ height: 15px;
+ border-width: 1px;
+ border-color: blue;
+ }
+}
+
+@media (pointer: coarse) {
+ input[type="checkbox"] {
+ width: 30px;
+ height: 30px;
+ border-width: 2px;
+ border-color: red;
+ }
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Especificación</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comentario</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('CSS4 Media Queries', '#pointer', 'pointer')}}</td>
+ <td>{{Spec2('CSS4 Media Queries')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad">Compatibilidad</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.pointer")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/@media/any-pointer">The <code>any-pointer</code> media feature</a></li>
+</ul>
diff --git a/files/es/web/css/@media/resolución/index.html b/files/es/web/css/@media/resolución/index.html
new file mode 100644
index 0000000000..bd2beb4866
--- /dev/null
+++ b/files/es/web/css/@media/resolución/index.html
@@ -0,0 +1,88 @@
+---
+title: Resolución
+slug: Web/CSS/@media/resolución
+tags:
+ - Referencia
+ - resolución
+translation_of: Web/CSS/@media/resolution
+---
+<p><strong><code>resolución</code></strong><code> es una función de medios de CSS</code> cuyo valor es la densidad de píxeles del dispositivo de salida, como un CSS<a href="/en-US/docs/Web/CSS/resolution"><code>&lt;resolution&gt;</code></a>.</p>
+
+<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">Comentario</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('CSS3 Media Queries', '#resolution', 'resolution')}}</td>
+ <td>{{Spec2('CSS3 Media Queries')}}</td>
+ <td>Definición inicial</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con 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</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>{{ CompatUnknown() }}</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>
+ <table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Característica</th>
+ </tr>
+ </tbody>
+ </table>
+ </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</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>{{ CompatUnknown() }}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/es/web/css/@media/width/index.html b/files/es/web/css/@media/width/index.html
new file mode 100644
index 0000000000..a4392047b3
--- /dev/null
+++ b/files/es/web/css/@media/width/index.html
@@ -0,0 +1,124 @@
+---
+title: width
+slug: Web/CSS/@media/width
+translation_of: Web/CSS/@media/width
+---
+<div>{{cssref}}</div>
+
+<p>El <strong><code>width</code></strong> <a href="/en-US/docs/CSS">CSS</a> {{cssxref("@media")}} media caracteristica puede ser usada para aplicar estilos basados en el ancho  de el  {{glossary("viewport")}} (o la caja de la pagina, para <a href="/en-US/docs/Web/CSS/Paged_media">paged media</a>).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>La característica <code>width</code> es especificada como {{cssxref("&lt;length&gt;")}} valor que representa el ancho de la ventana gráfica. Es una función de rango, lo que significa que también puede usar el prefijo <strong><code>min-width</code></strong> and <code><strong>max-width</strong></code> variantes para consultar valores mínimos y máximos, respectivamente.</p>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Watch this element as you resize your viewport's width.&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Exact width */
+@media (width: 360px) {
+ div {
+ color: red;
+ }
+}
+
+/* Minimum width */
+@media (min-width: 35rem) {
+ div {
+ background: yellow;
+ }
+}
+
+/* Maximum width */
+@media (max-width: 50rem) {
+ div {
+ border: 2px solid blue;
+ }
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example','90%')}}</p>
+
+<h2 id="Specificaciones">Specificaciones</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('CSS4 Media Queries', '#width', 'width')}}</td>
+ <td>{{Spec2('CSS4 Media Queries')}}</td>
+ <td>The value can now be negative, in which case it computes to false.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS3 Media Queries', '#width', 'width')}}</td>
+ <td>{{Spec2('CSS3 Media Queries')}}</td>
+ <td>Initial definition. The value must be nonnegative.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Navegadores Compatibles</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table" style="height: 117px; width: 561px;">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Chrome</th>
+ <th>
+ <p>Firefox (Gecko)</p>
+ </th>
+ <th>Internet Explorer</th>
+ <th>Edge</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>9.0</td>
+ <td>14+</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table" style="height: 91px; width: 499px;">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Mobile</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>56+</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>9.3+</td>
+ </tr>
+ </tbody>
+</table>
+</div>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2025-01-05 22:03:33 +0000