Crear una pagina Web Responsive fácilmente

Crear una pagina Web Responsive fácilmente

Crear una página web responsive fácilmente,.

En este tema vamos hablar sobre como crear una pagina web totalmente responsive, este no un teme muy avanzado, solo es un ejemplo muy básico, pero con esto tendrán una gran idea sobre como se hace un sitio web que sea adaptable con cualquier pantalla en diferentes dispositivos.

 

¿Como crear un sitio web responsive?.

Empecemos.

Paso 1. Definimos el Metatag

Dentro de la etiqueta debes colocar las siguientes lineas de código.

<meta name="viewport" content="width=device−width, initial−scale=1.0" />

Internet Explorer 8 no soporta media-queries, por lo que tendremos que darle soporte por javascript, usando media-queries.jsrespond.js. Incluiremos esta línea en nuestro código HTML.

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> < ![endif]-->

Paso 2. Definimos la Estructura HTML

En este ejemplo se muestra una simple estructura con un header, contenedor content, sidebar y un footer. El header es fixed y tiene una altura de 180px. El contenedor content tiene una anchura de 600px y la barra lateral de 300px.

""

Paso 3. Creamos CSS Media-queries.

CSS3 media query es la clave para un diseño responsive. Le dice al navegador como renderizar la página para específicas anchuras. Las siguientes reglas serán efectivas en una anchura de 980px o menos. Simplemente se cambia el valor de la anchura del container de píxel a porcentaje, por lo que los contenedores fluirán, en vez de estar estáticos.

/* para 980px o menos */</code>

#pagewrap {

width: 94%:
}

#content {

width: 65%;
}

#sidebar {

width: 30%;
}

Para el viewport de 700px o menos el #content y #sidebar pasa a una anchura auto y se elimina el float así tendrá una anchura completa, al 100%.

/* para 700px o menos. Con auto width se hace un reset al container. */
#content {</code>

width: auto;
float: none;
}

#sidebar {

width: auto;
float: none;
}

Para 480px o menos resetea el #header a auto, cambia la fuente h1 a 24px y esconde la barra lateral.

/* para 480px o menos */
#header {</code>

height: auto;
}

h1 {

font-size: 24px;
}

#sidebar {

display: none;
}

Con este ejemplo básico, tendrás unas web responsive adaptable a en diferentes pantallas ya sea un dispositivo móvil.

Ver demo

Abimael Gutierrez P.

Abimael Gutierrez P.
Fundador de apdesc

Poner un video en modo background en una Página Web con HTML5 y CSS

Poner un vídeo como fondo(background) de una página web con HTML5 usando CSS. HTML5 se ha vuelto algo natural para los navegadores modernos … Continuar leyendo