Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: BloodSharp en 5 Febrero 2021, 08:19 am


Título: [CSS] Consulta con responsive design básico
Publicado por: BloodSharp en 5 Febrero 2021, 08:19 am
Buenas gente del foro, resulta que hace poco estoy aprendiendo a dar estilos responsivos(? (ni idea como traducirlo bien :xD) manualmente y tengo una consulta: ¿Cómo se podría rellenar los espacios en blanco para que queden el fondo de las cajas con el mismo tamaño?

(https://i.imgur.com/wgxzyjm.png)

Código
  1. <!DOCTYPE html>
  2. <html lang="es">
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="responsive-media-queries.css">
  9. </head>
  11.     <div class="contenedor" style="color: white;font-size: 2em;">
  12.         <div class="fila">
  13.             <div style="background-color: red;" class="columna-largo-2 columna-mediano-2 columna-peque-3 columna-mini-12">
  14.                 <p>Texto</p>
  15.             </div>
  16.             <div style="background-color: green;" class="columna-largo-6 columna-mediano-5 columna-peque-9 columna-mini-12">
  17.                 p*3>Lorem
  18.             </div>
  19.             <div style="background-color: blue;" class="columna-largo-4 columna-mediano-5 columna-peque-12 columna-mini-12">
  20.                 p*4>Lorem
  21.             </div>
  22.         </div>
  23.     </div>
  24.     <h1>Hola</h1>
  25. </body>
  26. </html>

Código
  1. /*
  2. Estilos Globales
  3. */
  4. *
  5. {
  6.     margin: 0px;
  7.     padding: 0px;
  8.     list-style: none;
  9.     text-decoration: none;
  10.     font-family: sans-serif;
  11.     box-sizing: border-box;
  12. }
  13.  
  14. .contenedor
  15. {
  16.     position: relative;
  17.     margin: auto;
  18.     width: 100%;
  19.     height: auto;
  20. }
  21.  
  22. .fila
  23. {
  24.     position: relative;
  25.     margin: auto;
  26.     width: 100%;
  27.     height: auto;
  28.     clear: both;
  29.     display: table;
  30. }
  31.  
  32. [class*="columna-"]
  33. {
  34.     float: left;
  35.     border: 2px solid black;
  36.     /*padding: 20px;*/
  37. }
  38.  
  39. /*Pantallas*/
  40. @media(min-width: 1200px)
  41. {
  42.     .columna-largo-12{width:100%;}
  43.     .columna-largo-11{width:calc(11*100%/12);}
  44.     .columna-largo-10{width:calc(10*100%/12);}
  45.     .columna-largo-9{width:calc(9*100%/12);}
  46.     .columna-largo-8{width:calc(8*100%/12);}
  47.     .columna-largo-7{width:calc(7*100%/12);}
  48.     .columna-largo-6{width:calc(6*100%/12);}
  49.     .columna-largo-5{width:calc(5*100%/12);}
  50.     .columna-largo-4{width:calc(4*100%/12);}
  51.     .columna-largo-3{width:calc(3*100%/12);}
  52.     .columna-largo-2{width:calc(2*100%/12);}
  53.     .columna-largo-1{width:calc(1*100%/12);}
  54. }
  55.  
  56. @media(max-width:1199px) and (min-width:992px)
  57. {
  58.     .columna-mediano-12{width:100%;}
  59.     .columna-mediano-11{width:calc(11*100%/12);}
  60.     .columna-mediano-10{width:calc(10*100%/12);}
  61.     .columna-mediano-9{width:calc(9*100%/12);}
  62.     .columna-mediano-8{width:calc(8*100%/12);}
  63.     .columna-mediano-7{width:calc(7*100%/12);}
  64.     .columna-mediano-6{width:calc(6*100%/12);}
  65.     .columna-mediano-5{width:calc(5*100%/12);}
  66.     .columna-mediano-4{width:calc(4*100%/12);}
  67.     .columna-mediano-3{width:calc(3*100%/12);}
  68.     .columna-mediano-2{width:calc(2*100%/12);}
  69.     .columna-mediano-1{width:calc(1*100%/12);}
  70. }
  71.  
  72. @media(max-width:991px) and (min-width:768px)
  73. {
  74.     .columna-peque-12{width:100%;}
  75.     .columna-peque-11{width:calc(11*100%/12);}
  76.     .columna-peque-10{width:calc(10*100%/12);}
  77.     .columna-peque-9{width:calc(9*100%/12);}
  78.     .columna-peque-8{width:calc(8*100%/12);}
  79.     .columna-peque-7{width:calc(7*100%/12);}
  80.     .columna-peque-6{width:calc(6*100%/12);}
  81.     .columna-peque-5{width:calc(5*100%/12);}
  82.     .columna-peque-4{width:calc(4*100%/12);}
  83.     .columna-peque-3{width:calc(3*100%/12);}
  84.     .columna-peque-2{width:calc(2*100%/12);}
  85.     .columna-peque-1{width:calc(1*100%/12);}
  86. }
  87.  
  88. @media(max-width:767px)
  89. {
  90.     .columna-mini-12{width:100%;}
  91.     .columna-mini-11{width:calc(11*100%/12);}
  92.     .columna-mini-10{width:calc(10*100%/12);}
  93.     .columna-mini-9{width:calc(9*100%/12);}
  94.     .columna-mini-8{width:calc(8*100%/12);}
  95.     .columna-mini-7{width:calc(7*100%/12);}
  96.     .columna-mini-6{width:calc(6*100%/12);}
  97.     .columna-mini-5{width:calc(5*100%/12);}
  98.     .columna-mini-4{width:calc(4*100%/12);}
  99.     .columna-mini-3{width:calc(3*100%/12);}
  100.     .columna-mini-2{width:calc(2*100%/12);}
  101.     .columna-mini-1{width:calc(1*100%/12);}
  102. }


B#

Título: Re: [CSS] Consulta con responsive design básico
Publicado por: #!drvy en 5 Febrero 2021, 11:50 am
Hoy en día ya está obsoleto usar floats para responsive. Tienes flex y grid para hacer tu desarrollo más sencillo.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/

Tal y como lo tienes puesto, puedes hacer que .fila sea de tipo flex y alinear los hijos con strech. En la clase .fila seria quitar display: table y poner flex.

Código
  1. display: flex;
  2. align-items: stretch;
  3. flex-wrap: wrap;

Demo: https://jsfiddle.net/afmjncz0/1/


Te recomiendo mirarte los enlaces que te puse arriba, y si quieres indagar más puedes mirar como lo hace Bootstrap o ver PoCs de flex grids.

https://codepen.io/flpwgr/pen/qbMJaY
https://github.com/twbs/bootstrap/tree/main/scss

Saludos

Título: Re: [CSS] Consulta con responsive design básico
Publicado por: fcmateo en 23 Abril 2021, 17:49 pm
Como comentó anteriormente drvy el uso de Floats está obsoleto y no es una buena práctica. Aunque si estás recién aprendiendo tal vez sea útil conocer también esas clases...

Me gustaría invitarte a conocer css-grid y flex-box, es más sencillo y con muchísimo potencial.
Además hoy día es una buena práctica aportar semántica a nuestro código con el uso de las "nuevas" etiquetas HTML5 (header, nav, main, section, article, aside)

Por el tema de css-grid y flexbox, en youtube hay videos muy cortitos e intuitivos que te ayudan de un vistazo a implementar estas caracterisitcas css.

Título: Re: [CSS] Consulta con responsive design básico
Publicado por: WHK en 23 Abril 2021, 19:47 pm
No te sale mas facil utilizar un framework ya hecho como bootstrap?, Lo puedes hacer en unas pocas líneas:

https://startbootstrap.com/template/simple-sidebar

Título: Re: [CSS] Consulta con responsive design básico
Publicado por: Beginner Web en 26 Abril 2021, 12:18 pm
Capaz se le pidieron de tarea para la escuela y debe hacerlo sin bootstrap... pero lo recomendable es usar bootstrap  ;-)

Título: Re: [CSS] Consulta con responsive design básico
Publicado por: BloodSharp en 26 Abril 2021, 16:55 pm
Cita de: Beginner Web en 26 Abril 2021, 12:18 pm
Capaz se le pidieron de tarea para la escuela y debe hacerlo sin bootstrap... pero lo recomendable es usar bootstrap  ;-)

No, no era tarea de escuela, quería aprender por mi cuenta como hacer los estilos a mano propia sin utilizar ningún framework, solo que estaba y sigo todavía en falta de práctica con css. :xD

Por otro lado, estaba en ese momento siguiendo una serie de videos de youtube en los cuál expllican paso a paso como crear los estilos con media queries y mencionan a Bootstrap como referencia...

Dejo la serie de videos por si a alguien más le interesa como armar lo que estaba armando yo en su momento:

p0-4RM_1tXY
mmcR4iVqJBg
-nPUUbW5-5k
em1Z1d0lbPw
_w7AWkzyM6c


B#

Título: Re: [CSS] Consulta con responsive design básico
Publicado por: sonih1996 en 18 Mayo 2021, 15:52 pm
genial


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines