Crear un sitio con Responsive Web Design Parte-2

Esta es la segunda parte de cómo crear una web con Responsive Web Design, iremos paso a paso, primero con teoría, después teoría y práctica.

Hasta llegar en la parte donde tendremos que hacer nuestro diseño de cómo queremos nuestro sitio web, luego realizaremos la estructura HTML seguido dando el estilo con CSS.

En lugar de usar px utiliza % o em para el tamaño de tus capas, fuentes e imágenes (especialmente para el ancho). Así te será más cómodo adaptar tu web a diferentes resoluciones. Inicialmente pedes limitar la capa contenedora con la propiedad max-width, o bien establecer un ancho en px y luego cambiarlo a % a través de @media.

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> - See more at:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> Este meta tag se utiliza para controlar cómo aparecerá el contenido HTML en los navegadores móviles. Así nos aseguramos que el contenido se ajusta al ancho del dispositivo. En este caso estamos indicando que el contenido tendrá el ancho del dispositivo y que la escala mínima y máxima es de 1.

Ejeplos y Sintaxis con media queries

Con @media screen estamos iniciando la consulta media query, para añadir condiciones debemos utilizar “and”. Es este caso estamos aplicando un ancho del 100% a la capa #contenedor si el monitor o ventana tiene una resolución inferior 800px - See more at: http://www.destacaimagen.com/diseno-y-maquetacion-web-smartphones-y-tablets/#sthash.YGjuaEad.dpuf

Con @media screen estamos iniciando la consulta media query, para añadir condiciones debemos utilizar “and”. Es este caso estamos aplicando un ancho del 100% a la capa #contenedor si el monitor o ventana tiene una resolución inferior 800px.

@media screen and (max-width: 800px) {
      #contenedor{
                           width:100%;
                           }
}


El ancho de pantalla actual del iPhone es de 320px. Vamos a suponer que para ese ancho nuestro diseño fluido presenta una serie de dificultades (puede ser desde cambiar el logo, eliminar una columna, cambiar la organización de los elementos de la pantalla, etc…). Dentro de nuestra hoja de estilos haríamos.

La instrucción se compone de dos partes: el tipo de medio utilizado en este caso “screen”, que agrupa a todos los medios que se ven via una pantalla) combinándolo mediante un “and” con el Media Query (max-width: 320px). Estamos preguntando: ¿Es un medio con pantalla y tiene un ancho de 320px o menor? Entonces le aplicamos los estilos situados entre los corchetes correspondientes.

@media screen and (max-width: 320px) {

   /* Aquí van las reglas CSS necesarias */

}

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> - See more at: http://www.destacaimagen.com/diseno-y-maquetacion-web-smartphones-y-tablets/#sthash.YGjuaEad.dpuf