Responsive design

PARA TENER EN CUENTA:
*Recuerda es un ejemplo básico
*Mira el demo para que veas q si es lo que estas buscando  VER DEMO 

prueba lo  cambiando el tamaño del navegador con el maximizar en pc o entrando desde un  celular

*Para entender esta explicación se necesita un conocimiento básico  de CSS  y HTML.

* Hacer buenas practicas  de  desarrollo . 

como no colocar  estilos quemados en  las paginas , si  se llega  a utilizar  este tipo de estilos  afectara significativamente  a la  hora de  hacer  el Responsive design.

*Cuales son los estilos quemados:  son  todos  los que se colocan en la pagina del html  como :

style="width:750px; border: 2px solid red ;" 

<center>

 </center>

Estos q acabe de mencionar es como no  se hacen los estilos  correctamente .

* Un consejo no importa si lo que  te dicen es que  solo es una  pagina solo para web en pc ,  hagan buenas practicas de desarrollo  la  mayoría de los clientes  cambian su opinión y des pues  quieren sus paginas en dispositivos móviles por aquello de abarcar mucho mas mercado  .

bueno para también acomodar mejor los divs  e imagenes o en si lo que nos imaginemos   , es muy importante el  manejo de la propiedad   display  :inline-block o  display:block  

* display  :inline-block   : recordemos q si  tenemos dos elementos html  con esta propiedad , y si el contenedor es  suficiente  grande  q darán en linea si no  bajara automáticamente 

*Otra  recomendación es es usar los  anchos  con porcentaje pero con un mínimo de limite , ejemplo si  tenemos  un div contenedor y le decimos  sea de ancho el 100%  pero  no puede ser menor  a 400px 

 esto es muy bueno ya que se adaptara sin problemas en varias  resoluciones   solo tendrá un limite que utilizaremos  por referencia   . 

 max-width :100%;

   min-width:400px;

MEDIA QUERIES

Son una excelente forma de entregar una pagina para diferentes dispositivos, y mejorar la experiencia para cada tipo de usuarios.

lo que se quiere lograr  con las media queris es  crear estilos basados en las propiedades de un dispositivo , como el ancho de la pantalla ,etc .

Representación del media query @media only screen and (aqui va el ancho maximo o minimo  ).

En el siguiente ejemplo diremos q si la resolucion  del dispotivo es mayor a 1034 px entonces   la pagina tenga un  estilo determinado.

@media only screen and (min-width: 1035px){

 /*   aqui  va el estilo q deseamos  */  

   #contenedor

{

    width:790PX;

    border:3px solid black;

   padding:0;

   margin:0px;

    text-align:justify;

        }

}

 despues de tener el primer estilo  crearemos otro donde diremos  todo lo que sea mayor a 799 px pero menor a 1035px  entonces   bueno recuerden q estos 1035 pixeles es el  estilo anterior ,  tenga el siguente estilo. Recuerden q pueden poner el  estilo que quieran según la condición  no obligatoria mente tiene que ser el mismo .

@media only screen and (min-width: 800px)

{

  /*   aqui  va todo el estilo q deseamos  de la pagina */  

    #contenedor

{

    width:790PX;

    border:3px solid black;

   padding:0;

   margin:0px;

    text-align:justify;

    

    } 

}

por ultimo el  estilo para el smarphone q en mi caso es de 400px de ancho  en este caso lo que hago es limitar el contenedor general  hasta  un minimo de 400 px  solo por si hay uno mas pequeño 

@media only screen and (max-width: 799px)

{

    

    #contenedor

{

   max-width :100%;

   min-width:400px;

    

   padding:0;

   margin:0px;

    text-align:justify;

    

    }

Una recomendación cada  media query pongala en una hoja de estilo aparte  para que la no llegue  a miles  de lineas y se convierta en un dolor  de cabeza  cambiar el css  en un futuro q toque modificar .

DESCARGAR DEMO

VER DEMO