0
238
VistasCómo completar los requisitos de imagen rwd sin agregar HTML
¡Tengo un proyecto cuya estructura de pantalla original es como el ejemplo de programa que adjunto!
Ahora el borrador de diseño requiere que el bloque amarillo original debe aparecer debajo del bloque verde en los dispositivos móviles, pero mi HTML original ya está organizado así. Siento que si es difícil implementar una pantalla de este tipo en un dispositivo móvil, no sé cómo lograr un cambio de pantalla de este tipo a través de css sin agregar HTML.
.demo { display: flex; justify-content: space-between; } .demo .main { flex: 2; background-color: #FBD148; } .demo .main .article { background-color: #49FF00; height: 200px; } .demo .main .reply { background-color: #3DB2FF; height: 200px; } .demo .about { flex: 1; background-color: #FBFF00; height: 200px; } <div class="demo"> <div class="main"> <div class="article">article</div> <div class="reply">reply</div> </div> <div class="about">about</div> </div> 
1 Respuestas
Responde la pregunta0
Para resolver esto, la mejor manera es usar display: grid en las clases principales y de demostración . La clase de demostración tendrá dos columnas y dos filas. En el testamento principal solo tiene filas automáticas. Con @media query, redefinimos las columnas y filas de la cuadrícula en la demostración y colocamos el elemento amarillo entre el verde y el azul .
:root { --height: 200px; } .demo { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, var(--height)); } .demo .main { display: grid; grid-auto-rows: var(--height); background-color: #fbd148; } .demo .main .article { background-color: #49ff00; } .demo .main .reply { background-color: #3db2ff; } .demo .about { background-color: #fbff00; } @media screen and (max-width: 768px) { .demo { grid-template-columns: 1fr; grid-template-rows: repeat(3, var(--height)); } .about { grid-column: 1; grid-row: 2; } .reply { grid-row: 3; } } <div class="demo"> <div class="main"> <div class="article">article</div> <div class="reply">reply</div> </div> <div class="about">about</div> </div>