I am looking to do a responsive scalar way using percentages example: (33.3%, 50% 65% 100%). to degrade the width of the screen
.container{
align-items: center;
}
.cajas{
float: left;
background: brown;
width: 100px;
text-align: center;
height: 100px;
color: white;
margin: 3px;
}<body>
<div class="Container">
<div class="cajas"> 1 </div>
<div class="cajas"> 2 </div>
<div class="cajas"> 3 </div>
<div class="cajas"> 4 </div>
</div>
</body>Something like that is that you occupy?
.container{
align-items: center;
}
.cajas{
float: left;
background: brown;
width: 100px;
text-align: center;
height: 100px;
color: white;
margin: 3px;
}
@media screen and (min-width: 400px) {
.cajas {width: 25%; }
}
@media screen and (min-width: 600px) {
.cajas {width: 50%; }
}
@media screen and (min-width: 800px) {
.cajas {width: 100%; }
}<body>
<div class="Container">
<div class="cajas"> 1 </div>
<div class="cajas"> 2 </div>
<div class="cajas"> 3 </div>
<div class="cajas"> 4 </div>
</div>
</body>I do not know if I understood you correctly, since I interpret it in two ways:
1) You want to use half queries with percentages, something like this:
@media (min-width: 8.33%){
/*Estilos*/
}
@media (min-width: 16.66%){
/*Estilos*/
}
If it's what you're looking for, I'll give you a spoiler: this can not be done , since the media are only defined with absolute measures (px, em, cm, rem) and not with relative (%, vmin, vh, vw).
2) Now if you are looking for it is a kind of twitter bootstrap where you define the percentages of the columns , because in reality the bootstrap is good for you, but the other option is to use css variables and define yourself a bootstrap, I give you an example:
:root{
/*Este es el numero de la columna, por defecto puede ser 1*/
--n-columna: 1;
/*Defines el numero de grillas que hay en cada movil*/
--grid-xs: 4;
--grid-s: 6;
--grid-m: 10;
--grid-l: 12;
--ancho-movil: calc( (100% / var(--grid-xs) ) * var(--n-columna) );
--ancho-tableta: calc( (100% / var(--grid-s) ) * var(--n-columna) );
--ancho-laptop: calc( (100% / var(--grid-m) ) * var(--n-columna) );
--ancho-monitor: calc( (100% / var(--grid-l) ) * var(--n-columna) );
}
.col-1{
--n-columna: 1;
/*La ultima formula de arriba se transformara en monitores así:
* calc( (100% / 12) * 1) que es aproximadamente: 8.33%
*/
}
.col-2{
--n-columna: 2;
/*En este caso la formula de arriba se transformara en:
* monitores grandes:
* calc( (100% / 12) * 2) que es aproximadamente: 16.66%
* en laptops:
* calc( (100% / 10) * 2) que es aproximadamente: 20%
* en tablets:
* calc( (100% / 6) * 2) que es aproximadamente: 33.33%
* en celulares:
* calc( (100% / 4) * 2) que es aproximadamente: 50%
*/
}
.col-3{
--n-columna: 3;
/*Y así sucesivamente con cada columna.*/
}
.col-4{ --n-columna: 4; }
.col-5{ --n-columna: 5; }
.col-6{ --n-columna: 6; }
.col-7{ --n-columna: 7; }
.col-8{ --n-columna: 8; }
.col-9{ --n-columna: 9; }
.col-10{ --n-columna: 10; }
.col-11{ --n-columna: 11; }
.col-12{ --n-columna: 12; }
/*En cuanto a los queries quedarían como te muestro a continuación
* y no tienes que tocarlos más, ya que solo debes modificar
* La variables definidas en el root*/
@media (min-width: 620px){ /*o la medida que definas para moviles*/
.col-1, .col-2, .col-3, .col-4,
.col-5, .col-6, .col-7, .col-8
.col-9, .col-10, .col-11, .col-12
{ width: var(--ancho-movil) }
}
@media (min-width: 860px){ /*o la medida que definas para tablets*/
.col-1, .col-2, .col-3, .col-4,
.col-5, .col-6, .col-7, .col-8
.col-9, .col-10, .col-11, .col-12
{ width: var(--ancho-laptop) }
}
@media (min-width: 1240px){ /*o la medida que definas para laptops*/
.col-1, .col-2, .col-3, .col-4,
.col-5, .col-6, .col-7, .col-8
.col-9, .col-10, .col-11, .col-12
{ width: var(--ancho-laptop) }
}
@media (min-width: 1920px){ /*o la medida que definas para monitores más grandes*/
.col-1, .col-2, .col-3, .col-4,
.col-5, .col-6, .col-7, .col-8
.col-9, .col-10, .col-11, .col-12
{ width: var(--ancho-monitor) }
}