Código
<!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"> <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"> </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> </body> </html>
Código
/* 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#