Question

我有2 div的#propuesta和.dropdown，当我使用display：none和display：block属性更改分辨率时，我想出现一个而另一个消失。这是我的代码

<div class="propuestas">
                <div class="square"><a href=""><img src="img/fa-building.png" title="Infraestructura"></a></div>
                <div class="square"><a href=""><img src="img/fa-car.png" title="Movilidad"></a></div>
                <div class="square"><a href=""><img src="img/fa-education.png" title="Educacion"></a></div>
                <div class="square"><a href=""><img src="img/fa-firstaid.png" title="Salud"></a></div>
                <div class="square"><a href=""><img src="img/fa-police.png" title="Seguridad"></a></div>
                <div class="square"><a href=""><img src="img/fa-public.png" title="Espacio Publico"></a></div>
                <div class="square"><a href=""><img src="img/fa-teamwork.png" title="Trabajo en equipo"></a></div>
                <div class="square"><a href=""><img src="img/fa-tics.png" title="Técnologia"></a></div>
                <div class="square"><a href=""><img src="img/fa-water.png" title="Servicios Públos"></a></div>
                <div class="square"><a href=""><img src="img/fa-woman.png" title="Mujer"></a></div>
                <div class="square"><a href=""><img src="img/fa-worker.png" title="Empleo"></a></div>

            </div>

            <!--MENU PROPUESTAS RESPONSIVE-->
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Categorias</button>
            <div id="myDropdown" class="dropdown-content">
              <a href="propuestas/infraestuctura.html">Infraestructura y medio ambiente</a>
              <a href="propuestas/empleo.html">Empleo</a>
              <a href="propuestas/educacion.html">Educación</a>
              <a href="propuestas/trabajo-en-equipo.html">Trabajo en equipo</a>
              <a href="propuestas/servicios-publicos.html">Servicios Públicos</a>
              <a href="propuestas/movilidad.html">Movilidad</a>
              <a href="propuestas/Seguridad.html">Seguridad</a>
              <a href="propuestas/Social.html">Social</a>
              <a href="propuestas/mujer.html">Mujer</a>
              <a href="propuestas/tecnologia.html">Tecnologia</a>
            </div>
          </div>

.propuestas{
    width: 100%;
    height: 95%;
    background-color: rgb(66, 35, 10);
    display: flex;
    flex-flow:  wrap;
    justify-content: center;
}

.dropdown {
    width: 100%;
    height: auto;
    position: relative;
    display: none;
    cursor: pointer;
  }
/* media queries*/

@media only screen and (max-width: 2048px) {
    .dropdown{
        display:none;
        }
    #propuestas{
        display: block;
    }      
}

@media only screen and (max-width: 748px) {
.dropdown{
        display: block ;
    }
    #propuestas{
        display: none;
    }
}

您可以在以下链接中查看结果。 https://jsfiddle.net/ciscojuan/4zqu80av/1/

Answer 1

您在媒体查询中的#propuestas CSS选择器用于ID。

对于类，应将其写为.propuestas。

属性显示无法处理媒体查询

1 个答案: