0

Hola tengo esta navbar html:

<nav class="navbar">
    <div class="container">
        <!-- Logo a la izquierda -->
        <a class="navbar-brand" href="#">
            <img src="{% static 'sorteo/images/LogoAmigoInvisible.webp' %}" alt="Logo">
        </a>
        <!-- Botones a la derecha -->
        <div class="navbar-nav">
            <button class="button-navbar-recuperarSorteo">Recuperar Sorteo</button>
            <button class="button-navbar-findder">By findder</button>
        </div>
    </div>
</nav>

La cual modifico su tamaño utilizando las siguientes media query:

    @media (min-width: 300px){
.navbar {
    padding: 10px 10px;
  }

  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    margin: auto;
  }

  img {
    width: 100%;
  }

  .navbar-brand {
    width: 50%;
  }

  .navbar-nav {
    display: flex;
    gap: 10px;
    width: 50%;
    justify-content: end;
  }

  .button-navbar-recuperarSorteo {
    @include botonPrincipal(43%);
  }

  .button-navbar-findder {
    @include botonFindder(43%);
  }

Esta media query se ejecuta cuando la pantalla tiene 300px de ancho y luego tengo otra que se ejecuta con 525 px que es esta:

@media (min-width: 525px) {
  .navbar-brand {
    width: 35%;
  }

  .navbar-nav{
    width: 65%;
  }

  .button-navbar-recuperarSorteo {
    @include botonPrincipal(50%);
  }

  .button-navbar-findder {
    @include botonFindder(50%);
  }
}

Por algún motivo la media query pequeña tiene prioridad y la grande que debería remplazar a la pequeña "sobrescribiendo los cambios" no lo hace

1
  • usa max-width
    – Roy
    Commented el 29 abr. a las 15:06

2 respuestas 2

1

Cómo funcionan los Media Queries en CSS

Ahora que tienes una idea básica de lo que es un media query, echemos un vistazo a cómo funciona realmente esta particular característica de CSS.

Un media query básico luce así:

@media only screen and (max-width: 576px) {
    // hacer algo
}

@media only screen and (min-width: 576px) {
    // volver hacer algo
}

Esto significa que los estilos que se escriban dentro de las reglas de media querys anteriores sólo funcionarán o serán efectivos en las propiedades de ancho especificadas anteriormente.

Literalmente, está diciendo que a este ancho en particular (es decir, la propiedad max-width de 576px), CSS por favor aplica los estilos que voy a escribir aquí sólo a este ancho, desde un ancho inicial de 0px.

Propiedades max-width y min-width

Hay dos cosas que debes tener en cuenta al crear media query para diferentes tamaños de pantalla: las propiedades max-width y min-width.

Cuando se pasa una propiedad max-width a un media query, CSS lo interpreta como un ancho que comienza en cero – eso si aún no se ha establecido una propiedad de ancho mínimo. Pronto llegaremos a eso.

Una vez que la propiedad max-width tiene un valor asignado, todos los estilos dentro de esa media query particular se aplicarán a cualquier dispositivo cuyo tamaño de pantalla abaque desde 0px hasta el ancho máximo especificado.

La propiedad min-width, por otro lado, toma el valor inicial que le has asignado y aplica los estilos dentro de la regla del media query hasta que se proporcione el siguiente max-width. Digamos por ejemplo:

@media only screen and (min-width: 576px) {
    // aplicar los estilos aquí a partir de este ancho mínimo  de 
    // 576px (dispositivos con tamaño de pantalla medio)
}

Los estilos que se escriban en el media query anterior sólo serían aplicables a los dispositivos que se encuentren dentro del ancho mínimo especificado y superior.

1

Te voy a responder con un ejemplo fácil.

Lo más recomendable es usar max-width en tus media query, así te quitas todo de una vez, cuando la medida supere max-width cambia al estilo para esa medida.

Veamos este breve pero muy buen ejemplo.

.responsive::before{
    background-color: #D2D2D2;
    content: "Texto en Pantalla Grande";
}

@media (max-width: 1000px) {
    .responsive::before{
        background-color: #B5BBDC;
        content: "max-width => 1000px";
    }
}

@media (max-width: 780px) {
    .responsive::before{
        background-color: #A6ECD6;
        content: "max-width => 780px";
    }
}

@media (max-width: 560px) {
    .responsive::before{
        background-color: #C7A3D2;
        content: "max-width => 560px";
    }
}

@media (max-width: 400px) {
    .responsive::before{
        background-color: #7387F4;
        content: "max-width => 400px";
    }
}
<div class="responsive"></div>

En este ejemplo vamos a destacar algunas cosas.

Primero, estoy generando cada texto con CSS para que en efecto se vea que el CSS está funcionando. Luego de eso es bueno ver que el CSS se interpreta, lo que significa que lo ultimo será lo que impere.

Justo por eso es que mi primer clase sin media query, la de las pantallas grandes, será suplantada por la siguiente y así sucesivamente, esto nos dice que si alguien entra desde el móvil lo que va a ver es la clase de móviles "más pequeña de 400px" y luego se ira expandiendo dependiendo del tamaño de pantalla.

Porque lo hago así? Justo por lo que dije antes, así me aseguro que la primer clase que se aplique sea la de móviles y luego, si el dispositivo tiene una pantalla más grande se vaya adaptando.

Por ultimo, el Snippet de SOes ya trae una pantalla o tamaño definido, para ver la primer pantalla, la del div grande, creo (aunque no estoy seguro) que tendrás que descargar el código y verlo en tu ambiente local, para el resto solo basta con cambiar el tamaño de la pantalla del navegador y los divs se irán cambiando conforme cambie la pantalla, así sin necesidad de tocar nada, será responsivo automáticamente.


Ya vi que existe la opción ampliar, para ver el primer ejemplo 😁😅 así que ya sabes que hacer para ver todas las pantallas de mi ejemplo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.