Archive for the ‘CSS’ Category

CSS3: media queries

Un punto importante si queremos hacer un website utilizando el “Responsive Design” es trabajar los estilos y el diseño en sí mismo. Para ayudarnos a la hora de mostrar nuestro site es diferentes medios y dispositivos tenemos las “media queries”.

Las “Media queries” amplían el atributo “media” llevando la separación de estilos por medio (pantalla o impresora) a un nivel superior al tener en cuenta las resoluciones de los diferentes dispositivos. Las “media queries” son soportadas por los principales navegadores Internet Explorer 9+, Firefox 3.5+, Safari 3+, Opera 7+, Chrome así como por la mayoria de los smartphones, tablets y otros dispositivos móviles.

Por lo general con el atributo media, se pueden usar al definir los enlaces a ficheros de estilos:

<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

O se pueden definir dentro de un fichero de estilos :

@media screen {
/* Estilos para mostrar en pantalla */
}
@media print{
/* Estilos para mostrar en impresora */
}

Al introducir las “media queries” en el atributo media las definiciones quedan de la siguiente manera:

&lt;link rel="stylesheet" type="text/css" media="screen <strong>and (max-width:480px)</strong>" href="screen.css"&gt;

O en el fichero de estilos

@media screen <strong>and (max-width:480px)</strong> {
/* Estilos para mostrar en pantalla */
}

La siguiente tabla muestra las características que se pueden usar en el atributo media:

Característica valor Permite Min/Max Descripción
width ancho Ancho del área visible
height alto Alto del área visible
device-width ancho Ancho del dispositivo
device-height alto Alto del dispositivo
orientation “portrait” o “landscape” No Orientación del dispositivo
aspect-ratio Ratio (w/h) Ratio entre el ancho y el alto, expresado en 2 números separados por una barra (16/9)
device-aspect-ratio Ratio (w/h) Ratio entre el ancho y el alto del dispositivo, expresado en 2 números separados por una barra (16/9)
color Número Número de bits por componente de color (si no el color, el valor es 0)
color-index Número Número de entradas en la tabla de color del dispositivo
monochrome Número Número de bits por píxel en la memoria de vídeo monocromo (blanco y negro si no, el valor es 0)
resolution Resolución Densidad de los píxeles de dispositivo de salida, como se expresa entero seguido de dpi o dpcm.
scan “progressive” o “interlace” No Proceso de digitalización utilizada por los dispositivos de TV
grid 0 o 1 No Si se establece en 1, el dispositivo está basado en red, tal como un terminal de teletipo o pantalla del teléfono con una sola fuente fija (todos los otros dispositivos son 0)

En la práctica, lo que nos va a interesar son las definiciones básicas para los dispositivos más usados:

/* Smartphones (landscape) */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* Desktops and laptops */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* iPads (landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
Share