Como fazer com que os div box sejam responsivos

eugeniocol · 13/03/2017

Hola buenas.

Como puedo hacer de estos cuatro div box1 y 2 estan en la msima posicion de altura uno a derecha y otro a izquierda al igual que box3 y 4, que al cambiar de tamaño de pantalla de mas a menos,llega un momento que se montan encima unio de otro y es hacer que el div box2 se coloque debajo de box1 igualmente box3 debajo del 4

Inserir CODE, HTML ou PHP:

#box1 {
	background-color:#0C0;
	position:absolute;
	top: 50px;
	left:50px;
	width:300px; /*width:300px;*/
	height:50px;
}

#box2 {
	background-color:#FC0;
	position:absolute;/* position:absolute;	*/
	top: 50px;
	right:50px;
	width:90px; /*width:90px;*/
	height:50px;
}

#box3 {
	background-color:#F30;
	position:absolute;
	bottom: 50px;
	right: 50px;
	width:300px;
	height:50px;
}

#box4 {
	background-color:#F9F;
	position:absolute;
	bottom: 50px;
	left: 50px;
	width:90px;
    height:50px;
}

Saludoss.

matiaskpo · 13/03/2017

las posiciones absolutas no son responsive amigo :S usa flexbox.

yoisberjflores · 13/03/2017

deja copio el css y lo pruebo amigo

denzel · 13/03/2017

Un div con posición absoluta SÍ puede adaptarse a cualquier tamaño de pantalla, averigua que es un media query, y si aún tienes dudas vuelve a preguntar por que lo que pides es muy fácil de hacer,,,

Charlie Araiza · 13/03/2017

Usa flexbox o de perdida inline-block o floats con media queries.

Sería algo así con flexbox

Inserir CODE, HTML ou PHP:

<style>
/*CSS*/

.contenedor 
{
/*propiedades que quieras*/

display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

#box1{/*propiedades que quieras*/...}

#box2{/*propiedades que quieras*/...}

#box3{/*propiedades que quieras*/...}

#box4{/*propiedades que quieras*/...}

</style>

<!-- HTML --> 

<div class="contenedor">
      <div id="box1">...</div>
      <div id="box2">...</div>
      <div id="box3">...</div>
      ...
</div>

eugeniocol · 13/03/2017

Charlie Araiza disse:

Usa flexbox o de perdida inline-block o floats con media queries.

Sería algo así con flexbox

Inserir CODE, HTML ou PHP:

<style>
/*CSS*/

.contenedor 
{
/*propiedades que quieras*/

display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

#box1{/*propiedades que quieras*/...}

#box2{/*propiedades que quieras*/...}

#box3{/*propiedades que quieras*/...}

#box4{/*propiedades que quieras*/...}

</style>

<!-- HTML --> 

<div class="contenedor">
      <div id="box1">...</div>
      <div id="box2">...</div>
      <div id="box3">...</div>
      ...
</div>

pues algo no entiendo o estoy haciendo mal tal cual pones los codigos se montan los div al estrechar la pantalla del navegador

HTML:

<div class="contenedor">       
              <div id="box1"><center>prueba1</center></div> 
              <div id="box2"><center>prueba2</center></div> 
              <div id="box3"><center>prueba3</center></div> 
              <div id="box4"><center>prueba4</center></div> 
         </div>

Inserir CODE, HTML ou PHP:

<style>
/*CSS*/
.contenedor {/*propiedades que quieras*/
    background-color:#0C0;
	width:auto; /*width:300px;*/
	height:auto;	
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
}

#box1 {
	background-color:#0C0;
	position:absolute;
	top: 50px;
	left:50px;
	width:300px; /*width:300px;*/
	height:50px;
}

#box2 {
	background-color:#FC0;
	position:absolute;/* position:absolute;	*/
	top: 50px;
	right:50px;
	width:90px; /*width:90px;*/
	height:50px;
}

#box3 {
	background-color:#F30;
	position:absolute;
	bottom: 50px;
	right: 50px;
	width:300px;
	height:50px;
}

#box4 {
	background-color:#F9F;
	position:absolute;
	bottom: 50px;
	left: 50px;
	width:90px;
    height:50px;
}
	
</style>

en cuanto a las medidas query me parece ver en google que hay una gran variedad,yo pensaba que con esto se solucionaba:

HTML:

<meta name="viewport" content="width=device-width; user-scalable=no; initial-scale=1; maximun-scale=1; minimun-scale=1">

Saludoss.

- - - Actualizado - - -

Charlie Araiza disse:

Usa flexbox o de perdida inline-block o floats con media queries.

Sería algo así con flexbox

Inserir CODE, HTML ou PHP:

<style>
/*CSS*/

.contenedor 
{
/*propiedades que quieras*/

display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

#box1{/*propiedades que quieras*/...}

#box2{/*propiedades que quieras*/...}

#box3{/*propiedades que quieras*/...}

#box4{/*propiedades que quieras*/...}

</style>

<!-- HTML --> 

<div class="contenedor">
      <div id="box1">...</div>
      <div id="box2">...</div>
      <div id="box3">...</div>
      ...
</div>

despues de postear acabo de ver esto Guía de Flexbox CSS3, creando estructuras flexibles facilmente. que creo que es lo que ando buscando siguiendo tu comentario.

Salud2.

Charlie Araiza · 13/03/2017

Bueno. Si quieres usar "position: absolute" tienes que usar media queries forzosamente.

Con flexbox sería así:

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>

         body
         {
             display: flex;
             flex-direction: column;
             justify-content: space-between;
             margin: 0;
             height: 100%;

             position:absolute; width:100%;             
         }   

         .contenedor
         {
             width: 100%;

             display: flex;
             justify-content: space-between;
             flex-wrap: wrap;
         }
         
         .margin
         {
              margin: 2rem;
         }


         #box1
         {
             background-color:#0C0;
             width:300px;
             height:50px;
             order:1;
         }   

         #box2 
         {
           background-color:#FC0;
           width:90px; /*width:90px;*/
           height:50px;
           order: 2;
        }

        #box3 {
           background-color:#F30;
           /*max-width:300px;*/
            width: 300px;
            height: 50px;
             order: 2;
        }

        #box4 {
              background-color:#F9F;
              width:90px;
              height:50px;
              order: 1;
        }

	
</style>
    </head>
    <body>
         <div class="contenedor">
             <div id="box1" class="margin">1</div>
             <div id="box2" class="margin">2</div>
         </div>
         <div class="contenedor">
              <div id="box3" class="margin">3</div>
              <div id="box4" class="margin">4</div>
         </div>     
    </body>
</html>

eugeniocol disse:
pues algo no entiendo o estoy haciendo mal tal cual pones los codigos se montan los div al estrechar la pantalla del navegador

HTML:

<div class="contenedor"> <div id="box1"><center>prueba1</center></div> <div id="box2"><center>prueba2</center></div> <div id="box3"><center>prueba3</center></div> <div id="box4"><center>prueba4</center></div> </div>

Inserir CODE, HTML ou PHP:

<style> /*CSS*/ .contenedor {/*propiedades que quieras*/ background-color:#0C0; width:auto; /*width:300px;*/ height:auto; display:flex; justify-content:space-around; flex-wrap:wrap; } #box1 { background-color:#0C0; position:absolute; top: 50px; left:50px; width:300px; /*width:300px;*/ height:50px; } #box2 { background-color:#FC0; position:absolute;/* position:absolute; */ top: 50px; right:50px; width:90px; /*width:90px;*/ height:50px; } #box3 { background-color:#F30; position:absolute; bottom: 50px; right: 50px; width:300px; height:50px; } #box4 { background-color:#F9F; position:absolute; bottom: 50px; left: 50px; width:90px; height:50px; } </style>

en cuanto a las medidas query me parece ver en google que hay una gran variedad,yo pensaba que con esto se solucionaba:

HTML:

<meta name="viewport" content="width=device-width; user-scalable=no; initial-scale=1; maximun-scale=1; minimun-scale=1">

Saludoss.

- - - Actualizado - - -

despues de postear acabo de ver esto Guía de Flexbox CSS3, creando estructuras flexibles facilmente. que creo que es lo que ando buscando siguiendo tu comentario.

Salud2.

eugeniocol · 13/03/2017

eugeniocol disse:
pues algo no entiendo o estoy haciendo mal tal cual pones los codigos se montan los div al estrechar la pantalla del navegador

HTML:

<div class="contenedor"> <div id="box1"><center>prueba1</center></div> <div id="box2"><center>prueba2</center></div> <div id="box3"><center>prueba3</center></div> <div id="box4"><center>prueba4</center></div> </div>

Inserir CODE, HTML ou PHP:

<style> /*CSS*/ .contenedor {/*propiedades que quieras*/ background-color:#0C0; width:auto; /*width:300px;*/ height:auto; display:flex; justify-content:space-around; flex-wrap:wrap; } #box1 { background-color:#0C0; position:absolute; top: 50px; left:50px; width:300px; /*width:300px;*/ height:50px; } #box2 { background-color:#FC0; position:absolute;/* position:absolute; */ top: 50px; right:50px; width:90px; /*width:90px;*/ height:50px; } #box3 { background-color:#F30; position:absolute; bottom: 50px; right: 50px; width:300px; height:50px; } #box4 { background-color:#F9F; position:absolute; bottom: 50px; left: 50px; width:90px; height:50px; } </style>

en cuanto a las medidas query me parece ver en google que hay una gran variedad,yo pensaba que con esto se solucionaba:

HTML:

<meta name="viewport" content="width=device-width; user-scalable=no; initial-scale=1; maximun-scale=1; minimun-scale=1">

Saludoss.

- - - Actualizado - - -

despues de postear acabo de ver esto Guía de Flexbox CSS3, creando estructuras flexibles facilmente. que creo que es lo que ando buscando siguiendo tu comentario.

Salud2.

ok, voy hacer pruebas.
gracias.

Saludosss.

denzel · 14/03/2017

La etiqueta <meta viewport> es solo el inicio, un media query es como cualquier otra regla de css solo que se aplica únicamente bajo ciertos tamaños de pantalla.
En el ejemplo que te voy a poner he puesto dos media queries, sus ventajas son:

Pixel perfect: tu escoges los breakpoints, es decir, en que momento se van producir los cambios en la estructura.
Puedes agregar todos lo breakpoints que quieras, de acuerdo a la estructura de tu web.

y ojo que estoy usando un solo contenedor:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  .contenedor{
    position: relative;
    min-height: 300px;
    border: 1px solid silver;
  }
  .box{
    position:absolute;
    height:50px;
  }
  #box1 {
    background-color:#0C0;
    top: 50px;
    left:50px;
    width:300px; 
  }
  #box2 {
    background-color:#FC0;
    top: 50px;
    right:50px;
    width:90px;
  }
  #box3 {
    background-color:#F30;
    bottom: 50px;
    right: 50px;
    width:300px;
  }
  #box4 {
    background-color:#F9F;
    bottom: 50px;
    left: 50px;
    width:90px;
  }	

  /*  
  EL VALOR DE max-width PUEDE SER CUALQUIER NÚMERO  
  DE ACUERDO A LA ESTRUCTURA DE TU WEB
  Y EN QUE MOMENTO QUIERES QUE SE EJECUTE EL "BREAKPOINT"
  */
  media only screen and (max-width: 510px) {
    #box2{
      top: 100px;
      right: auto;
      left: 50px;
    }
    #box3{
      right: auto;
      left: 50px;
    }
    #box4{
      bottom: 100px;
    }
  } 

  /*  
  ESTE ES OTRO "BREAKPOINT" PARA QUE LAS CAJAS MAS ANCHAS
  SE ACOMODEN A TODO LO ANCHO EN PANTALLAS MENORES A 418 PX
  */
  media only screen and (max-width: 418px) {
    #box1, #box3{ 
      width: calc(100% - 100px); 
      min-width: 90px;
    }
  }
  </style>
</head>
<body>
  <div class="contenedor">
    <div id="box1" class="box">1</div>
    <div id="box2" class="box">2</div>
    <div id="box3" class="box">3</div>
    <div id="box4" class="box">4</div>
  </div>
</body>
</html>

NOTA: cuando copies el código en tu editor de texto agrégale un arroba "@" antes de 'media only screen and', el editor del foro tiene un bug que convierte esa arroba en un código 😉

eugeniocol · 14/03/2017

denzel disse:
La etiqueta <meta viewport> es solo el inicio, un media query es como cualquier otra regla de css solo que se aplica únicamente bajo ciertos tamaños de pantalla.
En el ejemplo que te voy a poner he puesto dos media queries, sus ventajas son:

Pixel perfect: tu escoges los breakpoints, es decir, en que momento se van producir los cambios en la estructura.

Puedes agregar todos lo breakpoints que quieras, de acuerdo a la estructura de tu web.

y ojo que estoy usando un solo contenedor:

HTML:

<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .contenedor{ position: relative; min-height: 300px; border: 1px solid silver; } .box{ position:absolute; height:50px; } #box1 { background-color:#0C0; top: 50px; left:50px; width:300px; } #box2 { background-color:#FC0; top: 50px; right:50px; width:90px; } #box3 { background-color:#F30; bottom: 50px; right: 50px; width:300px; } #box4 { background-color:#F9F; bottom: 50px; left: 50px; width:90px; } /* EL VALOR DE max-width PUEDE SER CUALQUIER NÚMERO DE ACUERDO A LA ESTRUCTURA DE TU WEB Y EN QUE MOMENTO QUIERES QUE SE EJECUTE EL "BREAKPOINT" */ media only screen and (max-width: 510px) { #box2{ top: 100px; right: auto; left: 50px; } #box3{ right: auto; left: 50px; } #box4{ bottom: 100px; } } /* ESTE ES OTRO "BREAKPOINT" PARA QUE LAS CAJAS MAS ANCHAS SE ACOMODEN A TODO LO ANCHO EN PANTALLAS MENORES A 418 PX */ media only screen and (max-width: 418px) { #box1, #box3{ width: calc(100% - 100px); min-width: 90px; } } </style> </head> <body> <div class="contenedor"> <div id="box1" class="box">1</div> <div id="box2" class="box">2</div> <div id="box3" class="box">3</div> <div id="box4" class="box">4</div> </div> </body> </html>

NOTA: cuando copies el código en tu editor de texto agrégale un arroba "@" antes de 'media only screen and', el editor del foro tiene un bug que convierte esa arroba en un código 😉

ok. lo probarea, ahora voy a poner un nuevo post estoy probando varios temas a ver por cual me decido des pues de superar mis grandes dudas.

Saludoss.

Como fazer com que os div box sejam responsivos

eugeniocol

matiaskpo

yoisberjflores

denzel

Charlie Araiza

eugeniocol

Charlie Araiza

eugeniocol

denzel

eugeniocol

Tópicos similares