CSS media queries

CSS media queries para Laptops

CSS media queries se entiende como un módulo de CSS que permite adaptar la representación gráfica del contenido web a las características del dispositivo, en este caso la resolución. En el siguiente código podemos conocer el CSS genérico para Laptops.

Para hacer uso del siguiente código solo debes colocarlo dentro de tu hoja de estilos.

Si liste los post anteriores referentes a CSS media queries, podrás notar que para este caso hacemos uso de la propiedad «device» directamente y de aquí en adelante podrás agregar las resoluciones de pantalla en las que necesites aplicar cambios.

[css] /* ———– Laptops ———– */
/* cambios css para modo vertical y horizontal */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
{
/* inserta aquí tu código */
}
[/css]

Si deseas más información sobre como desarrollar en

CSS en español
, visita Mozilla Developer Network haciendo clic aquí.

CSS media queries para dispositivos móviles (smartphones)

Para hacer uso del siguiente código solo debes colocarlo dentro de tu hoja de estilos.

Si deseas que los cambios se vean tanto en web como en los dispositivos móviles utiliza el siguiente código:

[css] /* ———– dispositivos móviles ———– */
/* cambios css para modo vertical y horizontal */
@media only screen
and (min-width: 320px)
and (max-width: 736px)
{
/* inserta aquí tu código */
}
/* cambios css solo para modo vertical */
@media only screen
and (min-width: 320px)
and (max-width: 736px)
and (orientation: portrait)
{
/* inserta aquí tu código */
}

/* cambios css solo para modo horizontal */
@media only screen
and (min-width: 320px)
and (max-width: 736px)
and (orientation: landscape)
{
/* inserta aquí tu código */
}
[/css]

Si deseas que los cambios se vean solo en los dispositivos móviles utilizamos la propiedad «device» y la insertamos en el código:

[css] /* ———– dispositivos móviles ———– */
/* cambios css para modo vertical y horizontal */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 736px)
{
/* inserta aquí tu código */
}
/* cambios css solo para modo vertical */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 736px)
and (orientation: portrait)
{
/* inserta aquí tu código */
}

/* cambios css solo para modo horizontal */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 736px)
and (orientation: landscape)
{
/* inserta aquí tu código */
}
[/css]

CSS media queries para Tablets

Para hacer uso del siguiente código solo debes colocarlo dentro de tu hoja de estilos.

Si deseas que los cambios se vean tanto en web como en los dispositivos móviles utiliza el siguiente código:

[css] /* ———– Tablets ———– */
/* cambios css para modo vertical y horizontal */
@media only screen
and (min-width: 768px)
and (max-width: 1024px)
{
/* inserta aquí tu código */
}
/* cambios css solo para modo vertical */
@media only screen
and (min-width: 768px)
and (max-width: 1024px)
and (orientation: portrait)
{
/* inserta aquí tu código */
}

/* cambios css solo para modo horizontal */
@media only screen
and (min-width: 768px)
and (max-width: 1024px)
and (orientation: landscape)
{
/* inserta aquí tu código */
}
[/css]

Si deseas que los cambios se vean solo en los dispositivos móviles utilizamos la propiedad «device» y la insertamos en el código:

[css] /* ———– Tablets ———– */
/* cambios css para modo vertical y horizontal */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
{
/* inserta aquí tu código */
}
/* cambios css solo para modo vertical */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
{
/* inserta aquí tu código */
}

/* cambios css solo para modo horizontal */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
{
/* inserta aquí tu código */
}
[/css]