Crea un diseño responsive en 3 sencillos pasos

Crea un diseño responsive en 3 sencillos pasos

En la actualidad un diseño responsive son muy importantes. Aquellos que son nuevos en esto o
que no tienen mucha experiencia suelen tener algunas dudas sobre qué es y cómo hacer un diseño
responsive, si eres parte de este grupo de personas, continúa leyendo este artículo. Te vamos a
enseñar a realizar diseños responsivos en 3 sencillos pasos.

3 pasos para crear un diseño responsive

1- Metatag


Los navegadores móviles en su mayoría pueden escalar aquellas paginas HTML para adaptarla a la
pantalla de los dispositivos móviles, utilizando la etiqueta viewport puedes rastrearlo. Esta
etiqueta le estaría informando al navegador para que utilice una anchura determinada y desactiva
la escala inicial. Incluye el siguiente código dentro de la etiqueta.
<meta name="viewport" content="width=device−width, initial−scale=1.0" />
Ahora bien, Internet Explorer 8 no es capaz de soportar media-queries, lo que singinifica que
deberemos darle soporte JavaScript, utilizando media-queries.js o respond.js. para esto incluye
esta línea en el código HTML.
<!–[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-
mediaqueries.js"></script> < ![endif]–>

2- Estructura HTML


Si tenemos una estructura con un header, un contenedor content, sidebar y un footer. El header
será el fixed con un tamaño de 180px de altura (solo como ejemplo), supongamos que el content
tendrá una anchura de 600px y sidebar de 300px.

TE PUEDE INTERESAR: https://www.educa-sistemas.com/2020/03/por-que-se-requiere-una-aplicacion-movil.html

3- CSS media-queries


La verdadera clave para un buen diseño responsive está en CCC3 media query. Le indicara al
navegador cómo reaccionar a las anchuras de las páginas. Esta regla podrá ser aplicada en
medidas iguales o inferiores a 980px. Únicamente debemos hacer el cambio de la medida en
pixeles a porcentajes, lo que permitirá que los contenedores se adapten mejor.
/* para 980px o menos */
#pagewrap {
width: 94%:
}
#content {
width: 65%;
}
#sidebar {
width: 30%;

Deja un comentario