Adapta tu plantilla al diseño “Responsive”

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.

Adapta tu plantilla al diseño "Responsive"


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.

0
Shares

9 thoughts on “Adapta tu plantilla al diseño “Responsive”

  • septiembre 22, 2013 en 7:10 pm
    Permalink

    estas asociado con el blog de terreno blogger por que el diseño se parece mucho, lo demás se ve muy bien pero el menu es muy ancho y me cansa la vista, saludos!

    Responder
    • septiembre 30, 2013 en 7:26 pm
      Permalink

      Amigo, eso depende de la resolución que uses, si usas una inferior a 1280 px se vera el menú largo como tu dices.

      Saludos

      Responder
  • septiembre 25, 2013 en 11:45 pm
    Permalink

    Hola Hayder!
    Hace poco cambié el ancho total de mi blog de 1100 px a 1024 para que justamente sea más fácil eso de que se adapte a las disntitas resoluciones de las pantallas, no sé si era necesario ese cambio porque no tengo un móvil para comprobarlo.
    ¿Es necesario que cumpla con estas medidas para ese truco que has puesto en tu entrada o da igual que mida 1100 como 1355 px por ejemplo?

    Responder
  • noviembre 26, 2013 en 1:11 am
    Permalink

    buenas noches
    Al introducir el css sise sjusta las imagenes completas en el celular pero se distorsionan se ven como alrgadas, sera que hqy que tambien pober el largo al 100%

    Responder
  • noviembre 26, 2013 en 1:14 am
    Permalink

    buenas noches :
    Al aplicar el codigo css si se acopla la imagen al ancho del celular, pero se deforma la imagen alargandose ¿Cual es la sollución?
    gracias de antemano

    Responder
  • marzo 24, 2014 en 9:32 pm
    Permalink

    hola hayder, [-( mi blog en el pc de un amigo no se ve igual,la cabecera esta distorsionada,el tiene un portátil con la pantalla mas alargada y supongo que es por esto y que en los ipads puede pasar lo mismo,me sirve este truco para que se vea bien la cabecera? la diseñe yo,gracias socio por todo,he puesto muchos de tus trucos en mi blog 😎

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *