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

 

 


Tema destacado: Entrar al Canal Oficial Telegram de elhacker.net


+  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,206 veces)
BloodSharp


Desconectado Desconectado

Mensajes: 812


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


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

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: 812


¡ Hiperfoco !


Ver Perfil WWW
Re: [CSS] Consulta con responsive design básico
« Respuesta #5 en: 26 Abril 2021, 16:55 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,903 Último mensaje 16 Julio 2013, 22:46 pm
por manudg
Hacking basico - consulta sobre pishing, las pass no se guardan
Hacking
noquiero 1 2,722 Ú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,098 Último mensaje 4 Agosto 2015, 14:43 pm
por exploiterstack
Consulta sobre ejercicio basico en C?
Programación C/C++
palacio29 5 3,408 Último mensaje 14 Diciembre 2016, 07:45 am
por jessec01
Responsive design / Mobile First
Desarrollo Web
FGM24 2 2,788 Último mensaje 27 Julio 2021, 09:25 am
por 3n31ch
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines