JavaScript 和媒体查询

Question

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

当我在移动版本中使用下拉菜单时菜单没问题，但是当我尝试将其更改为非移动版本时它不起作用。我想要一个一栏的移动版本，当窗口大小超过 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);     
}

非常感谢!

Answer 1

我会改用 CSS 媒体查询:

@media (max-width: 400px) {
  .lista {
    display: block;
  }
  .especial {
    display: none;
  }
}

@media (min-width: 401px) {
  .lista {
    display: none;
  }
  .especial {
    display:block;
  }
}