Hola, te dejo algunos tips que te pueden ayudar.
1) Porcentajes: Te recomiendo utilizar porcentajes para los anchos de tus contenedores. De esta forma, al meter las media queries, solo tendras que ajustar lo que no se ajusta. Un ejemplo seria crear una clase contenedora que sea:
Código CSS:
Ver original.contenedor {
width:100%;
max-width:980px;
}
2) Etiquetas, no te olvides de meter las etiquetas para que se vea bien en todos los dispositivos:
Código HTML:
Ver original<!-- Responsive -->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="HandheldFriendly" content="true">
3) Imagenes responsive: Si quieres hacer que una imagen se ajuste al ancho del contenedor, te dejo una clase que utilizo yo, que iria seguida de la que contiene la ruta a la imagen:
Código CSS:
Ver original.box-responsive { -webkit-background-size:100%;-moz-background-size:100%;background-size:100%;background-repeat:no-repeat;margin:0 auto; }
.box-header { background-image: url('../img/box.header.png');width:100%;max-width:473px;height: 134px; }
Y luego la llamas asi:
Está en dos clases para que te sea facil crear varias imagenes responsive.
4) Bootstrap te puede ayudar, pero a mi me parece recargar mucho la pagina, al menos que sea un proyecto super grande. Si es una pagina basica, te recomiendo crearla vos desde cero.
5) Te aconsejo crear algunas clases especiales para jugar con los mediaqueries. Si por ejemplo, creas una clase que sea
.desaparece la puedes utilizar para cosas que quieras que no se vean en determinadas resoluciones (imagenes grandes que son solo para adornar, y que en pantallas de movil por ejemplo, no harian mas que molestar).
Si quieres que algo desaparezca cuando la resolucion es menor a 620 pixeles, utilizarias:
Código CSS:
Ver original@media (max-width: 620px) {
.desaparece { display:none !important; }
}
Espero te sirva, saludos!