Crear una versión móvil de tu website solo usando Media Queries (CSS)

Lo primero de todo es conocer un poco el uso de Media Queries en general, aquí hay una buena información que debería ser leída por todos los que son Desarrolladores ó Diseñadores WEB.

Para que nos funcione simplemente usaremos la etiqueta(tag) Link y la propiedad media con el Query en cuestión.

1- Ejemplo:
<link rel=”stylesheet” type=”text/css” href=”screen480.css” media=”screen and (min-width: 480px)” />

El Ejemplo 1 será útil para cualquier pantalla que tenga la resolución de un tamaño mayor a 480px.

2- Ejemplo:
<link rel=”stylesheet” type=”text/css” href=”screen.css” media=”screen and (min-width: 480px) and (max-width: 768px)“/>

El Ejemplo 2 aplicará como el Ejemplo 1 pero en este caso se restringue a resoluciones no mayores de 768px.

3- Ejemplo:
<link rel=”stylesheet” type=”text/css” href=”moviles.css” media=”handheld” />

En este 3er ejemplo no estamos usando un tamaño definido de pantalla sino más bien un tipo de dispositivo, en este caso tenemos el handheld, pero existen varios tipos entre ellos tenemos:

  • all Used for all media type devices
  • aural Used for speech and sound synthesizers
  • braille Used for braille tactile feedback devices
  • embossed Used for paged braille printers
  • handheld Used for small or handheld devices
  • print Used for printers
  • projection Used for projected presentations, like slides
  • screen Used for computer screens
  • tty Used for media using a fixed-pitch character grid, like teletypes and terminals
  • tv Used for television-type devices

Existe un problema con algunos dispositivos, sobre todo con Iphone.
Cuando creas tu css para utilizar en el iphone, en este caso 320px(viewport)-480px(landscape) verás que realmente el tamaño de la pantalla es 980px, aunque hayas definido el css anterior no lo tomaría en cuenta por 2 razones:

  • La pantalla por defecto en el Safari es 980px
  • Si está en viewport la pantalla es 320px y nosotros hemos definido “mayor de 480px

Tenemos que hacer 2 cosas:

  • Introducir este meta en nuestra página:
    <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
  • Modificar o crear un nuevo CSS indicando el tamaño que sea para un width menor de 481px.

El meta tag hará que el dispositivo tome el tamaño más grande con referencia a la pantalla(screen), con lo que veremos que al estar en landscape veremos el tamaño a 480px y cuando estemos en viewport estará en 320px.

Anuncios