@Media queries

una base con @media queries para una consulta en un foro

by kseso

HTML

<div id="pagina">
    
    <div id="principal">
    </div>
    
    <div id="col_izq">
    </div>
    
    <div id="col_dcha">
    </div>
  
  </div>

CSS

* {
    margin: 0;
    padding: 0;
  position: relative;    
}
html, body {
    background: #f5f5f5;
  width: 100%;
  height: 100%;
}
#pagina {
  background: #f0f0f0;
}
#principal {
  background: #6988A5;
}
#col_izq {
  background: #D4E2A4;  
}
#col_dcha {
  background: #EAB0A2;
}
#principal, #col_izq, #col_dcha {min-height: 100px; height: auto;}
/***********************
@medias queries
***********************/

@media screen and (min-width: 800px) {
    #pagina {
              width: 990px;
              margin: 0 auto; 
     }
    #principal{
              width: 600px;
              margin: 0 auto;              
     }
    #col_izq {
              width: 190px;
              position: absolute;
              left: 0;
              top: 0;    
     }
    #col_dcha {
              width: 190px;
              position: absolute;
              right: 0;
              top: 0;
     }
}
@media (max-width: 779px) {
    #pagina {
              max-width: 770px; 
     }
    #principal{
              width: 600px;
              margin: 0 170px 0 0;              
     }
    #col_izq {
              width: 100%;
              position: relative;    
     }
    #col_dcha {
              width: 170px;
              position: absolute;
              right: 0;
              top: 0;
     }
}
@media (max-width: 600px) {
    #pagina {
              width: 100%; 
     }
    #principal{
              width: 100%;
              margin: 0;              
     }
    #col_izq, #col_dcha {
              width: 100%;
              position: relative;    
     }
}