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

Question

如何在更改 windows 宽度时重新加载 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修改了，所以我想在windows变得小于或大于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);

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

How can I reload css styles when change windows width?

javascript

css

jquery

resize

reload