Question

如何在更改窗口宽度时重新加载css样式？

我试过这个但没有成功。简单的重新加载（F5）有助于纠正css标记。

jQuery(function($){
    var windowWidth = $(window).width();
    var trigger = 1024;
    if (windowWidth < trigger) var smaller = true;
    else var bigger = true;

    $(window).resize(function() {
        if(windowWidth != $(window).width() &&
            ( ( smaller == true && $(window).width() > trigger ) ||
              ( bigger == true && $(window).width() < trigger )
            )
          ){
            window.location.reload(); 
            return;
        }
    });
});

CSS示例

.example {
    display: block;
    padding: 12px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

@media screen and (min-width: 1024px) {

    .example {
        left: 80px;
        top: 80px;
        width: auto;
        padding: 8px;
    }

}

原始CSS样式已被某些JS修改，因此我想在窗口变得小于或大于1024px时重新加载原始样式。

Answer 1

你应该在jquery resize event

内挂钩你的代码（无论你想做什么，我都不明白你想做什么）

以下是一个例子：

$( window ).resize(function() {
  $( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
});

当视口宽度上升时，不要真正看到使用javascript或jquery来改变css的原因，通常它更适合使用css媒体查询。

Answer 2

实际上，当您使用超时

调用该函数时，它可以正常工作

setTimeout(function(){
    window.location.reload();
},1);

如何在更改窗口宽度时重新加载CSS样式？

2 个答案: