[CSS] Consulta con responsive design básico

Iniciado por BloodSharp, 5 Febrero 2021, 08:19 AM

0 Miembros y 2 Visitantes están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

BloodSharp

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 (html4strict) [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="responsive-media-queries.css">
</head>
<body>
    <div class="contenedor" style="color: white;font-size: 2em;">
        <div class="fila">
            <div style="background-color: red;" class="columna-largo-2 columna-mediano-2 columna-peque-3 columna-mini-12">
                <p>Texto</p>
            </div>
            <div style="background-color: green;" class="columna-largo-6 columna-mediano-5 columna-peque-9 columna-mini-12">
                p*3>Lorem
            </div>
            <div style="background-color: blue;" class="columna-largo-4 columna-mediano-5 columna-peque-12 columna-mini-12">
                p*4>Lorem
            </div>
        </div>
    </div>
    <h1>Hola</h1>
</body>
</html>

Código (css) [Seleccionar]
/*
Estilos Globales
*/
*
{
    margin: 0px;
    padding: 0px;
    list-style: none;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
}

.contenedor
{
    position: relative;
    margin: auto;
    width: 100%;
    height: auto;
}

.fila
{
    position: relative;
    margin: auto;
    width: 100%;
    height: auto;
    clear: both;
    display: table;
}

[class*="columna-"]
{
    float: left;
    border: 2px solid black;
    /*padding: 20px;*/
}

/*Pantallas*/
@media(min-width: 1200px)
{
    .columna-largo-12{width:100%;}
    .columna-largo-11{width:calc(11*100%/12);}
    .columna-largo-10{width:calc(10*100%/12);}
    .columna-largo-9{width:calc(9*100%/12);}
    .columna-largo-8{width:calc(8*100%/12);}
    .columna-largo-7{width:calc(7*100%/12);}
    .columna-largo-6{width:calc(6*100%/12);}
    .columna-largo-5{width:calc(5*100%/12);}
    .columna-largo-4{width:calc(4*100%/12);}
    .columna-largo-3{width:calc(3*100%/12);}
    .columna-largo-2{width:calc(2*100%/12);}
    .columna-largo-1{width:calc(1*100%/12);}
}

@media(max-width:1199px) and (min-width:992px)
{
    .columna-mediano-12{width:100%;}
    .columna-mediano-11{width:calc(11*100%/12);}
    .columna-mediano-10{width:calc(10*100%/12);}
    .columna-mediano-9{width:calc(9*100%/12);}
    .columna-mediano-8{width:calc(8*100%/12);}
    .columna-mediano-7{width:calc(7*100%/12);}
    .columna-mediano-6{width:calc(6*100%/12);}
    .columna-mediano-5{width:calc(5*100%/12);}
    .columna-mediano-4{width:calc(4*100%/12);}
    .columna-mediano-3{width:calc(3*100%/12);}
    .columna-mediano-2{width:calc(2*100%/12);}
    .columna-mediano-1{width:calc(1*100%/12);}
}

@media(max-width:991px) and (min-width:768px)
{
    .columna-peque-12{width:100%;}
    .columna-peque-11{width:calc(11*100%/12);}
    .columna-peque-10{width:calc(10*100%/12);}
    .columna-peque-9{width:calc(9*100%/12);}
    .columna-peque-8{width:calc(8*100%/12);}
    .columna-peque-7{width:calc(7*100%/12);}
    .columna-peque-6{width:calc(6*100%/12);}
    .columna-peque-5{width:calc(5*100%/12);}
    .columna-peque-4{width:calc(4*100%/12);}
    .columna-peque-3{width:calc(3*100%/12);}
    .columna-peque-2{width:calc(2*100%/12);}
    .columna-peque-1{width:calc(1*100%/12);}
}

@media(max-width:767px)
{
    .columna-mini-12{width:100%;}
    .columna-mini-11{width:calc(11*100%/12);}
    .columna-mini-10{width:calc(10*100%/12);}
    .columna-mini-9{width:calc(9*100%/12);}
    .columna-mini-8{width:calc(8*100%/12);}
    .columna-mini-7{width:calc(7*100%/12);}
    .columna-mini-6{width:calc(6*100%/12);}
    .columna-mini-5{width:calc(5*100%/12);}
    .columna-mini-4{width:calc(4*100%/12);}
    .columna-mini-3{width:calc(3*100%/12);}
    .columna-mini-2{width:calc(2*100%/12);}
    .columna-mini-1{width:calc(1*100%/12);}
}


B#


#!drvy

#1
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 (css) [Seleccionar]
display: flex;
align-items: stretch;
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

fcmateo

#2
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.

WHK

#3
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

Beginner Web

#4
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  ;-)
7w7

BloodSharp

#5
26 Abril 2021, 16:55 PM
Cita de: Beginner Web en 26 Abril 2021, 12:18 PMCapaz 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:

[youtube=640,360]https://www.youtube.com/watch?v=p0-4RM_1tXY[/youtube]
[youtube=640,360]https://www.youtube.com/watch?v=mmcR4iVqJBg[/youtube]
[youtube=640,360]https://www.youtube.com/watch?v=-nPUUbW5-5k[/youtube]
[youtube=640,360]https://www.youtube.com/watch?v=em1Z1d0lbPw[/youtube]
[youtube=640,360]https://www.youtube.com/watch?v=_w7AWkzyM6c[/youtube]


B#


Imprimir
Ir Arriba Páginas1
Acciones del Usuario