Saltar al contenido

[2021] Consultas sobre medios de diseño web adaptable {DH}

septiembre 29, 2021


¿Qué es una solicitud de medios?

Media Query es una técnica de CSS que se introdujo en CSS3.

Utilizar el @media Regla para insertar un bloque de propiedades CSS solo si una determinada condición es verdadera.

ejemplo

Si la ventana del navegador tiene 600 px o menos, el color de fondo es azul claro:

@ Solo pantalla multimedia y (ancho máximo: 600 px) {
Cuerpo {

Color de fondo: azul claro;
}
}

Inténtalo tú mismo »


Agregar punto de interrupción

Al comienzo de este tutorial, creamos una página web de filas y columnas que respondía pero no se veía bien en una pantalla pequeña.

Las consultas de los medios pueden ayudar con esto. Podemos agregar un punto de interrupción donde ciertas partes del diseño se comportan de manera diferente en cada lado del punto de interrupción.

escritorio

teléfono rwd

teléfono

Use una consulta de medios para agregar un punto de interrupción en 768px:

ejemplo

Cuando la pantalla …

leer mas:
[2021] Consultas sobre medios de diseño web adaptable {DH}