Quiero hacer una página receptiva usando reaccionar JS. Tengo algunos problemas para hacerlo. Realmente no sé cómo funciona el CSS de consulta de medios, pero para los @media(max-width:1024) y @media(max-width:768px) funciona como esperaba. Supongo que para el tamaño @media (max-width:425px) también funcionará donde funciona @media(max-width:768px) . Pero aparentemente a partir de @media(max-width:425px) sigue el punto de interrupción anterior( @media(max-width:768px) ) y @media(max-width:375px) siguiendo @media(max-width:425px) estilo. En el punto de interrupción 320px de vuelta a mis expectativas.
Este es mi html:
<!DOCTYPE html> <html lang="en"> <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="index.css"> </head> <body> <div class="container"> This is content </div> </body> </html>Y este es mi código CSS:
.container{ background-color: red; height: 100vh; } @media(max-width:1024px){ .container{ background-color: yellow; } } @media(max-width:768px){ .container{ background-color: green; } } @media(max-width:425px){ .container{ background-color: blue; } } @media(max-width:375px){ .container{ background-color: rosybrown; } } @media(max-width:320px){ .container{ background-color: rosybrown; } } ¿Hay alguna manera de que cada punto de interrupción tome su propio estilo? Como en max-width:1024px que toma un fondo amarillo y max-width:768px toma un fondo verde. ¿Es posible si quiero si en max-width:425px toma un fondo azul y en max-width:375 toma un color marrón rosado? Gracias de antemano.
Intenta agregar la única pantalla
@media(only screen and max-width:768px){ .container{ background-color: green; } }