Como usar CSS3 para cambiar dinámicamente tus diseños web

EnglishFrenchGermanItalianPortugueseRussianSpanish

No es nuevo pero cada día es más complicado resolver como diseñas una página web y/o presentas información.

Hace muchos años el mayor problema era a que resolución te iban a ver y esto era básicamente una cuestión de la resolución del monitor más o menos. Con la proliferación de iPhones/iPads/Androids y el resto de la familia de teléfono inteligentes ahora el problema es mayor. Ya no es solo es una cuestión de resolución es una cuestión de usabilidad: es un pecado “mostrar” un interface en un nexus one o un iPhone que en un iPad o cualquiera que sea la siguiente tableta que salga al mercado. Pero no solo esto la pantalla “retina” del iPhone4 muestra horrorosamente los gráficos que no han sido diseñados para tanta resolución.

La solución es el CSS3 que nos permite interrogar al dispositivo y cambiar lo que queramos: cual es la página de estilos que se va a seleccionar, cambiar solo algunas cosas de la actual y una larga lista de posibilidades incluido afinar las fotos para que se bien el el iPhone4.

Algunos de los trucos son del estilo:

<link rel=”stylesheet” media=”all and (max-device-width: 480px)” href=”iphone.css”>
<link rel=”stylesheet” media=”all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)” href=”ipad-portrait.css”>
<link rel=”stylesheet” media=”all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)” href=”ipad-landscape.css”>
<link rel=”stylesheet” media=”all and (min-device-width: 1025px)” href=”ipad-landscape.css”>

para aplicar hojas distintas dependiendo de la anchura.

O este que es unos de mis favoritos para el iPhone4 y en general para cualquier dispositivo que tiene mucha resolución:

<link
    rel="stylesheet"
    type="text/css"
    href="/css/retina.css"
    media="only screen and (-webkit-min-device-pixel-ratio: 2)" />


Los artículos que me han inspirado y que realmente merecen la pena verlos y revisar el sitio son:

Retina Display en el iPhone4.

Using CSS Media Queries to Style Your iPhone and iPad HTML By Elisabeth Robson

Actualización: Acabo de encontrar este artículo del maestro Icaza también sobre los displays de alta densidad y las aplicaciones.


Social Share Counters

Leave a Comment