¿Como hacer un responsive utilizando Porcentajes?

publicado por: Anonymous

Busco hacer un responsive de forma escalar usando porcentajes ejemplo: ( 33.3% , 50% 65% 100% ). para ir degradando el ancho de la pantalla

_x000D_

_x000D_

.container{_x000D_
  align-items: center;_x000D_
}_x000D_
.cajas{_x000D_
  float: left;_x000D_
	background: brown;_x000D_
  width: 100px;_x000D_
  text-align: center;_x000D_
  height: 100px;_x000D_
  color: white;_x000D_
  margin: 3px;_x000D_
}

_x000D_

<body>_x000D_
	<div class="Container">_x000D_
		<div class="cajas"> 1 </div>_x000D_
		<div class="cajas"> 2 </div>	_x000D_
		<div class="cajas"> 3 </div>_x000D_
		<div class="cajas"> 4 </div>		_x000D_
	</div>_x000D_
</body>

_x000D_

_x000D_

_x000D_

solución

Algo asi es que ocupas?

_x000D_

_x000D_

.container{_x000D_
  align-items: center;_x000D_
}_x000D_
.cajas{_x000D_
  float: left;_x000D_
	background: brown;_x000D_
  width: 100px;_x000D_
  text-align: center;_x000D_
  height: 100px;_x000D_
  color: white;_x000D_
  margin: 3px;_x000D_
}_x000D_
_x000D_
@media screen and (min-width: 400px) {_x000D_
    .cajas {width: 25%; }_x000D_
}_x000D_
_x000D_
@media screen and (min-width: 600px) {_x000D_
    .cajas {width: 50%; }_x000D_
}_x000D_
_x000D_
@media screen and (min-width: 800px) {_x000D_
    .cajas {width: 100%; }_x000D_
}

_x000D_

<body>_x000D_
	<div class="Container">_x000D_
		<div class="cajas"> 1 </div>_x000D_
		<div class="cajas"> 2 </div>	_x000D_
		<div class="cajas"> 3 </div>_x000D_
		<div class="cajas"> 4 </div>		_x000D_
	</div>_x000D_
</body>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published.