CSS
Preguntas de los medios

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
Buscar..


Sintaxis

  • @media [no | solo] tipo de medio y (función de medios) {/ * reglas de CSS para aplicar * /}

Parámetros

Parámetro Detalles
mediatype (Opcional) Este es el tipo de medio. Podría ser cualquier cosa en el rango de all a la screen .
not (Opcional) No aplica el CSS para este tipo de medio en particular y se aplica para todo lo demás.
media feature Lógica para identificar caso de uso para CSS. Opciones que se describen a continuación.
Característica de los medios Detalles
aspect-ratio Describe la relación de aspecto del área de visualización seleccionada del dispositivo de salida.
color Indica el número de bits por componente de color del dispositivo de salida. Si el dispositivo no es un dispositivo de color, este valor es cero.
color-index Indica el número de entradas en la tabla de búsqueda de colores para el dispositivo de salida.
grid Determina si el dispositivo de salida es un dispositivo de cuadrícula o un dispositivo de mapa de bits.
height La función de medios de altura describe la altura de la superficie de representación del dispositivo de salida.
max-width CSS no se aplicará en un ancho de pantalla más ancho que el especificado.
min-width CSS no se aplicará en un ancho de pantalla más estrecho que el especificado.
max-height CSS no se aplicará en una altura de pantalla más alta que la especificada.
min-height CSS no se aplicará en una altura de pantalla más corta que la especificada.
monochrome Indica el número de bits por píxel en un dispositivo monocromo (escala de grises).
orientation CSS solo se mostrará si el dispositivo está utilizando la orientación especificada. Ver comentarios para más detalles.
resolution Indica la resolución (densidad de píxeles) del dispositivo de salida.
scan Describe el proceso de escaneo de los dispositivos de salida de televisión.
width La función de ancho de medios describe el ancho de la superficie de representación del dispositivo de salida (como el ancho de la ventana del documento o el ancho del cuadro de página en una impresora).
Características en desuso Detalles
device-aspect-ratio CSS en Deprecated solo se mostrará en dispositivos cuya relación altura / anchura coincida con la proporción especificada. Esta es una característica deprecated y no se garantiza que funcione.
max-device-width Deprecated Igual que max-width pero mide el ancho físico de la pantalla, en lugar del ancho de visualización del navegador.
min-device-width Deprecated Igual que min-width pero mide el ancho físico de la pantalla, en lugar del ancho de visualización del navegador.
max-device-height Deprecated Igual que max-height pero mide el ancho físico de la pantalla, en lugar del ancho de visualización del navegador.
min-device-height Deprecated Igual que min-height pero mide el ancho físico de la pantalla, en lugar del ancho de visualización del navegador.

Observaciones

Las consultas de medios son compatibles con todos los navegadores modernos, incluidos Chrome, Firefox, Opera e Internet Explorer 9 y superiores.

Es importante tener en cuenta que la función de medios de orientation no se limita a los dispositivos móviles. Se basa en el ancho y el alto de la ventana gráfica (no de la ventana o los dispositivos).

El modo horizontal es cuando el ancho de la ventana gráfica es mayor que la altura de la ventana gráfica.

El modo vertical es cuando la altura de la ventana gráfica es mayor que el ancho de la ventana gráfica.

Esto generalmente se traduce en un monitor de escritorio en modo horizontal, pero a veces puede ser vertical.

En la mayoría de los casos, los dispositivos móviles informarán su resolución y no su tamaño real de píxeles, que puede diferir debido a la densidad de píxeles. Para obligarlos a informar su tamaño real de píxeles, agregue lo siguiente dentro de la etiqueta de su head :

<meta name="viewport" content="width=device-width, initial-scale=1">

Ejemplo básico

@media screen and (min-width: 720px) {
    body {
        background-color: skyblue;
    }
}

La consulta de medios anterior especifica dos condiciones:

  1. La página debe verse en una pantalla normal (no en una página impresa, proyector, etc.).
  2. El ancho del puerto de vista del usuario debe ser de al menos 720 píxeles.

Si se cumplen estas condiciones, los estilos dentro de la consulta de medios estarán activos y el color de fondo de la página será azul cielo.

Las consultas de medios se aplican dinámicamente. Si en la carga de la página se cumplen las condiciones especificadas en la consulta de medios, se aplicará el CSS, pero se desactivará de inmediato si las condiciones dejan de cumplirse. A la inversa, si las condiciones no se cumplen inicialmente, el CSS no se aplicará hasta que se cumplan las condiciones especificadas.

En nuestro ejemplo, si el ancho del puerto de vista del usuario es inicialmente mayor a 720 píxeles, pero el usuario reduce el ancho del navegador, el color de fondo dejará de ser azul cielo tan pronto como el usuario haya cambiado el tamaño del puerto de vista a menos de 720 píxeles. anchura.

Usar en la etiqueta de enlace

<link rel="stylesheet" media="min-width: 600px" href="example.css" />

Esta hoja de estilo aún se descarga, pero se aplica solo en dispositivos con un ancho de pantalla superior a 600 px.

tipo de medio

Las consultas de medios tienen un parámetro de tipo de mediatype opcional. Este parámetro se coloca directamente después de la @media declaración ( @media mediatype ), por ejemplo: 

@media print {
    html {
        background-color: white;
    }
}

El código CSS anterior le dará al elemento HTML DOM un color de fondo blanco cuando se imprima.

El parámetro mediatype tiene un prefijo opcional o not only que aplicará los estilos a todo excepto al tipo de medio especificado o solo al tipo de medio especificado, respectivamente. Por ejemplo, el siguiente ejemplo de código aplicará el estilo a todos los tipos de medios, excepto la print . 

@media not print {
    html {
        background-color: green;
    }
}

Y de la misma forma, para mostrarlo solo en la pantalla, se puede utilizar: 

@media only screen {
    .fadeInEffects {
        display: block;
    }
}

La lista de mediatype se puede entender mejor con la siguiente tabla:

Tipo de medio Descripción
all Aplicar a todos los dispositivos
screen Computadoras predeterminadas
print Impresoras en general. Se utiliza para diseñar versiones impresas de sitios web.
handheld PDA's, celulares y dispositivos de mano con una pequeña pantalla.
projection Para presentación proyectada, por ejemplo proyectores.
aural Sistemas del habla
braille Aparatos táctiles braille
embossed Impresoras braille paginadas
tv Aparatos tipo televisión
tty Dispositivos con una rejilla de caracteres de paso fijo. Terminales, portátiles.

Uso de consultas de medios para identificar diferentes tamaños de pantalla

Muchas veces, el diseño web sensible implica consultas de medios, que son bloques de CSS que solo se ejecutan si se cumple una condición. Esto es útil para el diseño web sensible porque puede usar consultas de medios para especificar diferentes estilos CSS para la versión móvil de su sitio web en lugar de la versión de escritorio. 

@media only screen and (min-width: 300px) and (max-width: 767px) {
    .site-title {
        font-size: 80%;
    }

    /* Styles in this block are only applied if the screen size is atleast 300px wide, but no more than 767px */
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .site-title {
        font-size: 90%;
    }

    /* Styles in this block are only applied if the screen size is atleast 768px wide, but no more than 1023px */
}

@media only screen and (min-width: 1024px) {
    .site-title {
        font-size: 120%;
    }

    /* Styles in this block are only applied if the screen size is over 1024px wide. */
}

Ancho vs Viewport

Cuando usamos "ancho" con consultas de medios, es importante configurar la metaetiqueta correctamente. La metaetiqueta básica se ve así y debe colocarse dentro de la etiqueta <head> . 

<meta name="viewport" content="width=device-width,initial-scale=1">

¿Por qué esto es importante?

Basado en la definición de "ancho" de MDN es

La función de ancho de medios describe el ancho de la superficie de representación del dispositivo de salida (como el ancho de la ventana del documento o el ancho del cuadro de página en una impresora).

Qué significa eso?

View-port es el ancho del dispositivo en sí. Si la resolución de su pantalla dice que la resolución es 1280 x 720, el ancho del puerto de visualización es "1280px".

Más a menudo muchos dispositivos asignan diferentes cantidades de píxeles para mostrar un píxel. Por ejemplo, el iPhone 6 Plus tiene una resolución de 1242 x 2208. Pero el ancho de la ventana gráfica y la altura de la ventana gráfica son 414 x 736. Eso significa que se utilizan 3 píxeles para crear 1 píxel.

Pero si no configuró correctamente la meta , intentará mostrar su página web con su resolución nativa, lo que se traducirá en una vista ampliada (textos e imágenes más pequeños).

Consultas de medios para pantallas de retina y no retina

Aunque esto funciona solo para los navegadores basados ​​en WebKit, esto es útil: 

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-width: 1200px) 
  and (max-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-width: 1200px) 
  and (max-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}

Información de fondo

Hay dos tipos de píxeles en la pantalla. Uno es los píxeles lógicos y el otro son los píxeles físicos. En su mayoría, los píxeles físicos siempre permanecen iguales, porque es el mismo para todos los dispositivos de visualización. Los píxeles lógicos cambian según la resolución de los dispositivos para mostrar píxeles de mayor calidad. La proporción de píxeles del dispositivo es la proporción entre los píxeles físicos y los píxeles lógicos. Por ejemplo, el MacBook Pro Retina, iPhone 4 y superior informa una proporción de píxeles del dispositivo de 2, porque la resolución lineal física es el doble de la resolución lógica.

La razón por la que esto funciona solo con los navegadores basados ​​en WebKit es debido a:

  • El prefijo del proveedor -webkit- antes de la regla.
  • Esto no se ha implementado en motores que no sean WebKit y Blink.

Terminología y estructura

Las consultas de medios le permiten a uno aplicar reglas de CSS según el tipo de dispositivo / medios (por ejemplo, pantalla, impresión o computadora de mano) llamado tipo de medios , los aspectos adicionales del dispositivo se describen con características de medios tales como la disponibilidad de color o las dimensiones de la ventana gráfica.

Estructura general de una consulta de medios 

@media [...] {
    /* One or more CSS rules to apply when the query is satisfied */
}

Una consulta de medios que contiene un tipo de medio 

@media print {
    /* One or more CSS rules to apply when the query is satisfied */
}

Una consulta de medios que contiene un tipo de medio y una característica de medios 

@media screen and (max-width: 600px) {
    /* One or more CSS rules to apply when the query is satisfied */
}

Una consulta de medios que contiene una característica de medios (y un tipo de medios implícito de "todos") 

@media (orientation: portrait) {        
    /* One or more CSS rules to apply when the query is satisfied */
}

Consultas de medios e IE8

Las consultas de medios no son compatibles en absoluto en IE8 y más abajo.

Una solución basada en Javascript

Para agregar soporte para IE8, puede usar una de varias soluciones JS. Por ejemplo, Responder se puede agregar para agregar soporte de consulta de medios para IE8 solo con el siguiente código: 

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

CSS Mediaqueries es otra biblioteca que hace lo mismo. El código para agregar esa biblioteca a su HTML sería idéntico: 

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

La alternativa

Si no le gusta una solución basada en JS, también debe considerar agregar una hoja de estilo IE <9 solo donde ajuste su estilo específico a IE <9. Para eso, debes agregar el siguiente HTML a tu código: 

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->

Nota :

Técnicamente es una alternativa más: usar hacks CSS para apuntar a IE <9. Tiene el mismo impacto que una hoja de estilo IE <9, pero no necesita una hoja de estilo separada para eso. Sin embargo, no recomiendo esta opción, ya que producen un código CSS no válido (que es solo una de las varias razones por las que el uso de hacks CSS generalmente está mal visto hoy).



Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow