Crear cuenta / - Bitacoras.comAgregador → Enlace permanente ¬

12puntos votar

Usar @media para detectar la resolución de la pantalla

Estamos acostumbrados a que las propiedades CSS nos permiten controlar la forma en que se ve nuestro sitio, sin embargo, pese a que por lo general lo vemos a través de un monitor, esa no es la única forma de acceso. Obviamente, ahora, con los teléfonos móviles esto es evidente pero ya antes había otras formas tales como, por ejemplo, una impresora. La regla llamada @media es la que permite especificar las propiedades que tendrá nuestro sitio según sea el medio en el cual se mostrará: una pantalla, un papel impreso o incluso algunos navegadores de voz. Usando eso, es posible diferenciar lo que se muestre en uno o en otro. Con este ejemplo simple haríamos que la sidebar no se imprimiera:@media screen { /* pantalla */ #sidebar-wrapper { display: block; } } @media print { /* impresora */ #sidebar-wrapper { display: none; } }El medio está definido por palabras: all, aural, braille, embossed, handheld, print, projection, screen, tty, tv e incluso hay propiedades exclusivas para determinados medios pero, el tema que...
tags
Continuar leyendo

Recomienda esta anotación por e-mail