JavaScript和媒体查询

JavaScript and MediaQuerys

本文关键字：查询 媒体 JavaScript      更新时间：2023-09-26

我试图让一些响应页面首先从移动开始，但我总是会回到同样的错误。

当我的下拉菜单是移动版本时，菜单是可以的，但当我试图将其更改为非移动版本时它不起作用。我想要一个有一列的移动版本，当windows大小超过400px时，修改为两列。

这是经过多次更改后的代码。

$('.slide ul').slideUp();
var ventana;
ventana=$('.wrapper').width();
$(window).on('load',preguntaTamano());
$(window).resize(preguntaTamano());

function preguntaTamano(e){
    if(ventana<400){
      mobile();     
    }
    else if(ventana>400){
      noMobile();
    }
}

function mobile(e){
    $('.especial').hide();      
    $('.toggle').on('click',controlaMenu);  
}
function controlaMenu(e){
    $('.slide ul').slideToggle();
    e.preventDefault(); 
}
function noMobile(e){
    $('.lista').show();
    var listaElegidos;
    listaElegidos= $('.elegidos').html();
    $('.especial').preppend(listaElegidos);     
}

非常感谢！

我会使用CSS媒体查询：

@media (max-width: 400px) {
  .lista {
    display: block;
  }
  .especial {
    display: none;
  }
}
@media (min-width: 401px) {
  .lista {
    display: none;
  }
  .especial {
    display:block;
  }
}
相关文章：