我有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/
最佳答案
媒体查询中的#propuestas
css选择器用于ID。
对于类,应将其写为.propuestas
。
关于html - 属性显示无法处理媒体查询,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56282867/