elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado:


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [CSS] Consulta con responsive design básico		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [CSS] Consulta con responsive design básico  (Leído 4,259 veces)
BloodSharp


Desconectado Desconectado

Mensajes: 813


¡ Hiperfoco !


Ver Perfil WWW
[CSS] Consulta con responsive design básico
« 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?



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#
En línea


#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: [CSS] Consulta con responsive design básico
« Respuesta #1 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
En línea
fcmateo

Desconectado Desconectado

Mensajes: 2


Ver Perfil
Re: [CSS] Consulta con responsive design básico
« Respuesta #2 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.
En línea
WHK
Moderador Global
***
Desconectado Desconectado

Mensajes: 6.606


Sin conocimiento no hay espíritu


Ver Perfil WWW
Re: [CSS] Consulta con responsive design básico
« Respuesta #3 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
En línea
- https://yhojann.cl/ - https://whk.cl/
Beginner Web


Desconectado Desconectado

Mensajes: 634


youtu.be/0YhflLRE-DA


Ver Perfil
Re: [CSS] Consulta con responsive design básico
« Respuesta #4 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  ;-)
En línea
7w7
BloodSharp


Desconectado Desconectado

Mensajes: 813


¡ Hiperfoco !


Ver Perfil WWW
Re: [CSS] Consulta con responsive design básico
« Respuesta #5 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:








B#
En línea


sonih1996

Desconectado Desconectado

Mensajes: 2


Ver Perfil
Re: [CSS] Consulta con responsive design básico
« Respuesta #6 en: 18 Mayo 2021, 15:52 pm »
genial
En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Encontré un CMS para foros responsive design
Desarrollo Web 		manudg 0 1,927 Último mensaje 16 Julio 2013, 22:46 pm
por manudg
Hacking basico - consulta sobre pishing, las pass no se guardan
Hacking 		noquiero 1 2,749 Último mensaje 22 Abril 2015, 15:19 pm
por Pablo Videla
Framework que transforme mi página en responsive design. « 1 2 »
Desarrollo Web 		exploiterstack 12 7,183 Último mensaje 4 Agosto 2015, 14:43 pm
por exploiterstack
Consulta sobre ejercicio basico en C?
Programación C/C++ 		palacio29 5 3,445 Último mensaje 14 Diciembre 2016, 07:45 am
por jessec01
Responsive design / Mobile First
Desarrollo Web 		FGM24 2 2,822 Último mensaje 27 Julio 2021, 09:25 am
por 3n31ch
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines