Adaptar pantalla a toda la resolución @Media Queries ó @Javascript

[Alexis88]

Una de las ventajas de usar Media Queries en lugar de JS radica en que JS se puede desactivar del navegador, algo que no ocurre con CSS. La desventaja principal está en que los navegadores viejos no soportan las Media Queries.

Hay varias formas de trabajar con ellas, ya sea mediante anchos máximos y mínimos (max-width y min-width), la orientación del dispositivo, la proporción de aspecto del dispositivo, entre otros.

Un pequeño ejemplo:

Código CSS:

@media only screen and (min-width : 800px){
    div{
        width: 900px;
    }
}
 
@media only screen and (min-width : 350px){
    div{
        width: 450px;
    }
}
 

En este ejemplo, asigno un ancho de 900 píxeles a todos los elementos <div> cuando el ancho mínimo de la pantalla sea de 800 píxeles, mientras que le asigno 350 cuando el ancho mínimo es de 450 píxeles.

Aquí puedes ver ejemplos y explicaciones del tema.

Saludos