How to use the media queries for (.col-xs, .col-sm, .col-md, .col -lg) ..?

Navigation
1

I need to know how to apply in media queries to each cell assigning the classes as seen in boostrap (Eye This practice I want to do on foot without boostrap as such), in order to apply the classes commonly called 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>
    
asked by Gamez 31.12.2017 в 03:03
source

1 answer

1

bootstrap helps the multiclass concept to apply a responsive depending on the device directly in the HTML layout, this is achieved by declaring in the html: 

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

If you already know what happens in bootstrap you should already know, that this means that in small phones the div will not have the width at 100%, but it will be 25%, in large cell phones, tablets and laptops it will have a width of ~ 33.33% and in larger dimensions it will measure a ~ 16.33%, this if you want to achieve it in css without bootstrap, you should do it like this: 

.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-....
}
    
answered by 31.12.2017 в 13:03
Build UserControl views "dynamically" Concatenate data in BIRT