1

Necesito saber como aplicar en media queries a cada movil asignando las clases como es visto en boostrap ( Ojo Esta practica la quiero hacer a pie sin boostrap como tal ), en fin como aplicar las class llamadas comunmente asi : .col-xs, .col-sm, .col-md, .col-lg ?

* {
    box-sizing: border-box;
    margin: 0;
    /*padding: 0;*/
}
.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
	background: ;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color: #33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}

/*--------------ESTO ES UNA PRUEBA MIA( TRATANDO DE BUSCAR EL PROBLEMA--------------------*/
.box-1{background: orange;float: right;}
.box-2{background: darkgreen;}
.box-3{background: darkred;}
.box-4{background: darkblue;}
.box-5{background: teal;}
.box-1,.box-2,.box-3,.box-4,.box-5{
  color: white;
  font-size: 1.12em;
  /*display:  inline-block;*/
}
.box-1,.box-5{padding: 26px;text-align: center;}
@media (max-width: 600px){
  .col-5{
    width: 2%;
  }
  .col-7{

  }
  .box-1{
    background: red;
  } 
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">

<div class="col-3 menu">
  <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
  </ul>
</div>

<div class="col-9">
  <h1>The City</h1>
  <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</div>
<hr/>
**Pueden usar este diseño para la explicacion **
<!--ESTO ES UNA PRUEBA, EN BUSCA DE MI PROBLEMA -->

<section>
  <div class="container">
    <div class="box-1 col-10">
      BOX-1 : Esto es el HEADER  
    </div>
    <div class="box-2 col-2">
      BOX-2 : Menu de la Pagina
    </div>
    <div class="box-3 col-7">
      BOX-3 : Esto es el Container
    </div>
    <div class="box-5 col-3">
      BOX-5 : Otro Contenido de la Web
    </div>
    <div class="box-4 col-2">
      BOX-4 : Publicidades 
    </div>
  </div>
</section>
</body>
</html>

1 respuesta 1

1

bootstrap se ayuda del concepto de multiclases para aplicar un responsive dependiendo del dispositivo directamente en la maquetación html, esto se logra declarando en el html:

<div class="col-xs-4 col-sm-3 col-md-3 col-lg-2">
</div>

Si ya sabes lo que pasa en bootstrap debes ya de saber, que esto significa que en moviles pequeños el div no va a tener el ancho al 100%, sino que será del 25%, en celulares grandes, tablets y portátiles tendrá un ancho de ~33.33% y en dimensiones más grandes medirá un ~16.33%, esto si lo quieres lograr en css sin bootstrap, deberías hacerlo así:

.col-xs-1{ width: 8.33%; }    
.col-xs-2{ width: 16.33%; }   
.col-xs-3{ width: 33.33%; }   
.col-xs-4{ width: 25%; }   
.col-....

@media (min-width: 768px){ 
  .col-sm-1{ width: 8.33%; }    
  .col-sm-2{ width: 16.33%; }   
  .col-sm-3{ width: 33.33%; }   
  .col-sm-4{ width: 25%; }   
  .col-....
}

@media (min-width: 992px){ 
  .col-md-1{ width: 8.33%; }    
  .col-md-2{ width: 16.33%; }   
  .col-md-3{ width: 33.33%; }   
  .col-md-4{ width: 25%; }   
  .col-....
}

@media (min-width: 1200px){ 
  .col-lg-1{ width: 8.33%; }    
  .col-lg-2{ width: 16.33%; }   
  .col-lg-3{ width: 33.33%; }   
  .col-lg-4{ width: 25%; }   
  .col-....
}
1
  • 1
    Muy buena esta respuesta A mi me ha servido de mucho Gracias
    – rod
    Commented el 27 abr. 2018 a las 7:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.