# data[].attributes.attachment_link.readable_text
Las media queries se introdujeron en CSS3 para dar respuesta a las necesidades del diseño web responsive. Mediante ellas podemos definir estilos condicionales, aplicables únicamente en determinadas situaciones. El uso más extendido de las media queries es para establecer estilos diferentes para cada ancho de pantalla.

1. Media queries en CSS para cada ancho de pantalla

Para definir una media query en CSS se utiliza la regla @media en la hoja de estilos. Se pueden definir todas las media queries que necesitemos según los diseños para cada ancho de pantalla.

¡Ojo! Como vimos en la unidad anterior, es necesario enlazar la hoja de estilo externa en el documento HTML.

Para definir los estilos para cada ancho de pantalla utilizaremos puntos de ruptura. Todos los estilos que no se incluyan dentro de una media query se verán en todos los tamaños de dispositivo.

Existen varias formas de definir el ancho del dispositivo dentro de la regla @media:

1.1. Media query indicando el ancho mínimo de pantalla

Todos los estilos que se incluyan en el interior de la siguiente media query serán utilizados en pantallas que tengan un ancho mínimo de 768px (punto de ruptura de 768px).

@media (min-width: 768px) {
  /* Estilos para pantallas con un ancho mínimo de 768px */
}

1.2. Media query indicando el ancho máximo de pantalla

Todos los estilos que se incluyan en el interior de la siguiente media query serán utilizados en pantallas que tengan un ancho máximo de 767px (punto de ruptura de 767px).

@media (max-width: 767px) {
  /* Estilos para pantallas con un ancho máximo de 768px */
}

1.3. Media query combinando múltiples condiciones

Es posible combinar múltiples condiciones en una media query para aplicar estilos solo cuando se cumplan todas las condiciones. Todos los estilos que se incluyan en el interior de la siguiente media query serán utilizados en pantallas que tengan un ancho entre 768px y 1024px (puntos de ruptura de 768px y 1024px).

@media (min-width: 768px) and (max-width: 1024px) {
  /* Estilos para pantallas con un ancho entre 768px y 1024px */
}

2. Ejemplos de Media queries para definir el ancho del dispositivo

Ejemplo 1:

Supongamos que queremos aplicar un estilo diferente en pantallas de ancho superior a 1024px, inferior a 1024px e inferior a 480px, tendríamos las siguientes media queries:

.click:after {
    content:"En pantalla grande";
}
@media (max-width: 1024px) {
    .click:after {
        content:"Tablet";
    }
}
@media (max-width: 480px) {
    .click:after {
        content:"Movil";
    }
}

Ver ejemplo completo:

0

Ejemplo 2:

La primera media query especifica una hoja de estilo para ser utilizada cuando la ventana tiene un ancho entre 450 y 800 píxeles y la segunda media query para pantallas menores a 449 píxeles.

.click:after {
    content:"En pantalla grande";
}
@media (min-width: 450px) and (max-width: 800px) {
       .click:after {
        content:"Tablet";
    }
}

@media (max-width: 449px) {
    .click:after {
        content:"Movil";
    }
}

Ver ejemplo completo:

0

2.1. Otras propiedades o condiciones

Además del ancho hay muchas otras propiedades que se pueden utilizar para aplicar o no estilos. Las siguientes son algunas de ellas:

2.2. Operadores lógicos en media queries

Como hemos visto, las media queries nos permiten utilizar operadores lógicos para comprobar si se cumple una condición.

Operador AND

El siguiente código aplicará estilos cuando la pantalla tenga un ancho mínimo de 700px y la orientación de la misma sea horizontal ( landscape).

@media (min-width: 700px) and (orientation: landscape) { ... }

Operador NOT

El siguiente código aplicará estilos cuando no se cumpla la condición especificada, es decir a cualquier elemento que no sea una pantalla convencional ni sea monocromo.

@media not screen and not (monochrome) { ... }

# data[].attributes.attachment_link.title
Media queries CSS para cumplir las necesidades del diseño responsive

# data[].attributes.attachment_link.description
Las media queries se introdujeron en CSS3 para dar respuesta a las necesidades del diseño web responsive. Con ellas podemos definir estilos condicionales.

# data[].attributes.attachment_link.title
Pseudoclases y pseudoelementos - Aprende desarrollo web | MDN

# data[].attributes.attachment_link.description
El conjunto de selectores que estudiaremos en este artículo se conocen como pseudoclases y pseudoelementos. Hay muchos y a menudo sirven para fines muy específicos. Una vez que sepas cómo usarlos, puedes echar un vistazo a la lista para ver si alguno sirve para la página que quieres crear. Una vez m…

# data[].attributes.headline
CASCADA Y ESPECIFICIDAD 05 - DISPLAY MÁS USADOS: BLOCK, INLINE E INLINE-BLOCK

# data[].attributes.subject
CASCADA Y ESPECIFICIDAD 05 - DISPLAY MÁS USADOS: BLOCK, INLINE E INLINE-BLOCK

# data[].attributes.attachment_link.title
Platzi: Cursos online profesionales de tecnología

# data[].attributes.attachment_link.description
Intelligent search from Bing makes it easier to quickly find what you're looking for and rewards you.

# data[].attributes.attachment_link.title
Atomic Design, qué es y cómo aplicarlo -

# data[].attributes.attachment_link.description
Descubre en qué consiste la metodología Atomic Design, cómo puedes aplicarla en tu flujo de trabajo y cuáles son sus ventajas en cuanto a resultados.