From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/@media/index.html | 360 +++++++++++++++++++++++++++++++++++++ 1 file changed, 360 insertions(+) create mode 100644 files/es/web/css/@media/index.html (limited to 'files/es/web/css/@media/index.html') 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 +--- +

{{CSSRef}}

+ +

Resumen

+ +

La regla-at CSS @media asocia un grupo de declaraciones anidadas, en un bloque CSS delimitado por llaves, con una condición definida por un media query. La regla-at @media puede ser usada no solo en el nivel superior de la hoja de estilos, sino también dentro de cualquier grupo de reglas conditionales.

+ +

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

+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Un <media-query> está compuesto por un tipo de medio opcional y/o un conjunto de características de medio.

+ +

Tipos de medios

+ +
+
all
+
Aplicable a todos los dispositivos.
+
print
+
Destinado material paginado y para documentos visibles en pantalla en modo de vista previa para impresión. Por favor, consulte la sección de medios paginados, y la sección de Media en el tutorial de Introducción para más información acerca de problemas de formateo específicos para los medios paginados.
+
screen
+
Destinado a principalmente a pantallas de computadora a color.
+
speech
+
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.
+
+ +
Nota: CSS2.1 y Media Queries 3 definió varios tipos de media adicionales (tty, tv, projection, handheld, braille, embossed, aural), pero fueron descontinuados en Media Queries 4 y no deben ser usados.
+ +

Características de Medios (media feature)

+ +

Cada característica de medios verifica una característica específica del navegador o dispositivo.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NombreResumenNotas
widthAnchura del viewport 
heightAltura del viewport 
aspect-ratioRelación de aspecto anchura-altura del viewport 
orientationOrientación del viewport 
resolutionDensidad de pixeles del dispositivo 
scanProceso de escaneo del dispositivo 
grid¿El dispositivo es un grid o un mapa de bits? 
update-frequencyQué tan rápido (si lo hace) puede el dispositivo modificar la apariencia del contenidoIncluido en Media Queries Nivel 4
overflow-blockCómo maneja el dispositivo el contenido que excede los límites del viewport a lo largo del eje de bloqueIncluido en Media Queries Nivel 4
overflow-inline¿Puede desplazarse hacia el contenido que excede los límites del viewport?Incluido en Media Queries Nivel 4
colorComponente de número de bits por color del dispositivo, o cero si el dispositivo no es a color. 
color-indexNúmero de entradas en la tabla de búsqueda de color del dispositivo, o cero si el dispositivo no usa una tabla. 
display-modeModo de visualización de la aplicación, según se especifique en la propiedad display del manifiesto de la aplicación web.Definido en la especificación del Manifiesto de Aplicación Web.
monochromeBits por pixel en el buffer de marco monocromático del dispositivo, o 0 si el dispositivo no es monocromático. 
inverted-colors¿El agente usuario o el Sistema Operativo está invirtiendo los colores?Incluido en Media Queries Nivel 4
pointer¿El mecanismo de entrada principal es un dispositivo apuntador? y de ser así, ¿qué tan preciso es?Incluido en Media Queries Nivel 4
hover¿El mecanismo de entrada principal permite que el usuario posicione el puntero sobre los elementos?Incluido en Media Queries Nivel 4
any-pointer¿Hay algún mecanismo de entrada que sea dispositivo apuntador? y de ser así, ¿qué tan preciso es éste?Incluido en Media Queries Nivel 4
any-hover¿Algún mecanismo de entrada disponible permite que el usuario posicione el puntero sobre los elementos?Incluido en Media Queries Nivel 4
light-levelNivel de luz ambiental actualIncluido en Media Queries Nivel 4
scripting¿Se soporta lenguaje de script (p.ej. JavaScript)?Incluido en Media Queries Nivel 4
device-width {{obsolete_inline}}Anchura de la superficie de representación del dispositivoDescontinuado en Media Queries Nivel 4
device-height {{obsolete_inline}}Altura de la superficie de representación del dispositivoDescontinuado en Media Queries Nivel 4
device-aspect-ratio {{obsolete_inline}}Relación de aspecto anchura-altura del dispositivoDescontinuado en Media Queries Nivel 4
-webkit-device-pixel-ratio {{non-standard_inline}}Número de pixeles reales del dispositivo por pixel CSSNo estándar; Específica de WebKit/Blink. De ser posible, use la característica resolution en su lugar.
-webkit-transform-3d {{non-standard_inline}}¿Se soportan {{cssxref("transform", "transformaciones")}} 3D?No estándar; Específica de WebKit/Blink
-webkit-transform-2d {{non-standard_inline}}¿Se soportan {{cssxref("transform", "transformaciones")}} 2D?No estándar; Específica de WebKit
-webkit-transition {{non-standard_inline}}Se soportan {{cssxref("transition", "transiciones")}} CSS?No estándar; Específica de WebKit
-webkit-animation {{non-standard_inline}}¿Se soportan {{cssxref("animation", "animaciones")}} CSS?No estándar; Específica de WebKit
+ +

Ejemplos

+ +
@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 }
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('Compat', '#css-media-queries', 'CSS Media Queries')}}{{Spec2('Compat')}}Estandariza las características -webkit-device-pixel-ratio y -webkit-transform-3d.
{{SpecName('CSS3 Conditional', '#at-media', '@media')}}{{Spec2('CSS3 Conditional')}}Define la sintaxis básica de la regla @media.
{{SpecName('CSS4 Media Queries', '#media', '@media')}}{{Spec2('CSS4 Media Queries')}} +

Se agregan las características scripting, pointer, hover, light-level, update-frequency, overflow-block, y overflow-inline.
+ Se descontinúan todos los tipos de medios excepto screen, print, speech, y all.

+
{{SpecName('CSS3 Media Queries', '#media0', '@media')}}{{Spec2('CSS3 Media Queries')}}Sin cambios.
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}{{Spec2('CSS2.1')}}Definición inicial.
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico (all, print, screen)1.0{{ CompatGeckoDesktop(1.7) }}6.09.21.3
speech{{CompatNo}}{{CompatNo}}{{CompatNo}}9.2{{CompatNo}}
Media features (características de medios)1.0{{ CompatGeckoDesktop(1.7) }}9.09.21.3
Característica display-mode{{CompatUnknown}}{{ CompatGeckoDesktop(47) }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (all, print, screen)1.0{{ CompatGeckoMobile(1.7) }}{{CompatVersionUnknown}}9.03.1
speech{{CompatNo}}{{CompatNo}}{{CompatNo}}9.0{{CompatNo}}
Media features (características de medios)1.0{{ CompatGeckoMobile(1.7) }}{{CompatVersionUnknown}}9.03.1
Característica display-mode{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Véase también

+ + -- cgit v1.2.3-54-g00ecf