@media
Aplica un bloque de estilos solo cuando se cumple una condicion, como un ancho maximo de pantalla. Es la base del diseno responsive.
El efecto se ve al angostar la ventana del navegador: la vista previa hereda el ancho real del contenedor.
Vista previa
Codigo
<style>
.caja { background: #eee; padding: 12px; }
@media (max-width: 480px) {
.caja { background: #191919; color: #fff; }
}
</style>
<div class="caja">Cambia de color en pantallas angostas</div>