Question

我正在使用css medias和JQuery构建响应式网站。

我创建了一个脚本来检查页面宽度：

if ($(window).width() < 1240) {
 $("#menu").toggle(); //hide menu
    $('#body-wrap').toggleClass('shifted'); //puts the body width to 100%
    $('#navbar').toggleClass('shifted'); //puts the navbar width to 100%
}

但是这段代码只有在刷新页面时才有效。

我该如何自动完成？

感谢。

Answer 1

将其置于resize事件中。

window.addEventListener('resize', function () {
  // Your code
});

您可能需要考虑使用CSS代替这样做（查看媒体查询）

Answer 2

您必须将其添加到onresize事件中： https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize

每次调整窗口大小时都会调用此事件，以便您可以响应这些更改。

但我认为更好的选择是使用CSS媒体查询，如下所示：

@media only screen 
and (max-device-width : 1240px) {

    #menu {
        display: none;
    }
}

示例和信息：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

如果声明没有刷新页面，我怎么能这样做？

2 个答案: