En estas épocas en las cuales la navegación a través de dispositivos motiles tales como tablets o teléfonos inteligentes se han puesto muy de moda a tal punto que ya representan un porcentaje importante del total de la navegación mundial por Internet, bien vale la pena adaptar la plantilla de nuestros blogs a estos aparatos móviles.
En el día les enseñare
como hacer responsive o adaptable a distintas resoluciones de pantalla las imágenes de tu blog y entradas.
Para empezar, crea páginas mucho más flexibles y fáciles de reorganizar si se necesita modificar el diseño. Al garantizar que la hoja de estilo permita adoptar un diseño líquido, ya estas en camino de adaptarnos al mundo de los móviles. En lugar de especificar un valor en el parámetro width, para los elementos contenedores, empiezas a usar un valor de max-width. En lugar de height indica la min-height, para que las fuentes más grandes y los textos de varias líneas no superen los límites del contenedor. Para evitar que las imágenes con ancho fijo se salgan de las columnas líquidas, aplica la regla CSS siguiente:
img {
max-width: 100%;
}
El anterior codigo lo deberas pegar justo antes de
]]></b:skin>Con ese pequeño fragmento de CSS harás que las imágenes de tu blog se adapten a cualquier resolución de pantalla.
Si tienes alguna duda o sugerencias no dudes en comentar, que te responderemos lo mas pronto posible.