Trucos básicos del Responsive Web Design I

Revelación number 1: Cambio del modelo de caja

¿Qué quebraderos de cabeza nos da que la anchura total de una caja sea el width + su borde + su padding, verdad? ¿No sería más sencillo que la anchura sea el width que le pones y si tiene padding lo añada por dentro y no se tenga que sumar? Pues a alguien le han valido sus rezos ya que tenemos solución para esto, y además sencillo y efectivo:

*{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}

Este cachito de código reseteará todos elementos para cambiar el modelo de caja. ¿Magia? Lo parece. Esto nos permitirá trabajar de manera más sencilla con bloques de contenido en nuestro proyecto responsive.
Buscando documentación al respecto, he encontrado en la Biblia del CSS (css-tricks.com), un artículo (http://css-tricks.com/box-sizing/) que hace referencia a esto. ¡Es del 2010! Vergüenza me debería dar enterarme a estas alturas, jajaja

Revelación number 2: redimensión de imágenes

Tema controvertido en responsive design: las imágenes. ¿Cómo las redimensionamos? Creo que mañana veremos más soluciones, pero de momento para abrir el apetito:

.img-container img {max-width:100%}

También sirve para vídeo, iframe, canvas y object.

Revelación number 3: el famoso viewport, ¿para qué sirve?

Había utilizado el meta viewport en mis proyectos pero sin entender demasiado para qué. Es sencillo: Los móviles sin esta etiqueta muestran las páginas web en zoom-out por defecto para que el usuario haga zoom-in para navegar. Pero si nuestra web es responsive y no queremos que el dispositivo actue de esa manera, sino que queremos que le haga caso a nuestro css, le ponemos esta línea de código en el <head> para avisarle que somos unos ‘pros’ y tenemos el responsive trabajado. ;)

<meta name=”viewport” content=”width=device-width, inicial-scale=1.0″ />

Este meta es un mundo. Os dejo un artículo sobre sus caraterísticas.

Revelación number 4: ¿Dónde ponemos los breakpoints?

Facil: Cuando el diseño se rompa vas y lo arreglas con una media query. Ya está. Punto pelota.

Revelación number 5: la unidad em

En responsive se recomienda trabajar con la em en lugar de con px. Si no se está acostumbrado cuesta un pelín al principio, porque tienen ciertas características un poco especiales: las unidades em son relativas al padre. Es decir, 1em no es igual en todas las declaraciones que hacemos en el código, ya que dependerá del font-size que tenga su progenitor. La unidad rem viene a salvar la papeleta porque sigue teniendo lo bueno que tiene el em, que es una unidad relativa, pero nos quita la dependencia de los ‘parientes’, ya que es relativa al root, a la etiqueta html.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s