El responsive design es hasta la fecha, la mejor práctica de diseño para las páginas webs. Aplicando responsive design obtendremos un diseño fluido, también llamado líquido, que puede adecuarse según el tamaño de la pantalla, brindándole un desenvolvimiento como ningún otro sitio web que mantiene un tamaño fijo en píxeles. Con responsive design tendrá un sitio que se mostrará adecuadamente e inteligentemente en móviles, portátiles y ordenadores de mesa, así como otros numerosos dispositivos que pueden navegar por internet.
Para empezar a crear un sitio con responsive design primeramente hay que clocar en etiqueta head el siguiente código:
Lo que no permite el zoom en móviles (no necesario, ya que el diseño es adaptable) al declarar que la escala mínima y máxima son la misma.
Probaremos lo versátil del Responsive Design colocando varias etiquetas section en el html, mientras que en la hoja de estilos empezaremos tipeando:
@media screen and (max-width:1000px){
section{
width:100%;
}
}
El truco esta en saber cuando usar width:100% en el css, ojo que lo que sigue después de @media screen es la condición de la resolución de pantalla, en este caso colocaremos 100% de ancho a los section solamente cuando la pantalla tenga un máximo de 1000 píxeles.
En el Responsive design para imágenes, deberá declarar en el css que todas las imágenes ocupen el ancho de su caja contenedora, es reescalable por supuesto, colocando el siguiente código:
img{
width:100%;
height:auto;
}