Javascript 隐藏DIV，如果窗口小于，则替换为DIV

我找到了这个主题，我想得到与下面引用的代码类似的东西，这是一个用于此类响应的代码：如果窗口比1280px窄，则隐藏一个div（id=“krug\u-wide”），并用另一个div（id=“krug\u-small”）替换隐藏的div

我还发现了与上述主题相关的页面。我仍然不知道正确和适当的语法，但我相信这对你来说是“小菜一碟”

先谢谢你

$(document).ready(function () {

    var screen = $(window)    

    if (screen.width < 1024) {
        $("#krug_wide").hide();
    }
    else {

        $("#floatdiv").show();
    }

});

$（文档）.ready（函数（）{
变量屏幕=$（窗口）
如果（屏幕宽度<1024）{
$（“#krug_wide”）.hide（）；
}
否则{
$（“#floatdiv”）.show（）；
}
});

您可以使用此链接上的示例

媒体查询由媒体类型和零个或多个表达式组成 检查特定媒体功能的条件

在CSS上使用

@media screen and (max-width: 1280px) {
    //Some property here
    #krug_wide{
       ...
    }
}

<link rel="stylesheet" media="screen and (max-width:1280px)" href="example.css" />

或创建不同的CSS

@media screen and (max-width: 1280px) {
    //Some property here
    #krug_wide{
       ...
    }
}

<link rel="stylesheet" media="screen and (max-width:1280px)" href="example.css" />

---

在css中应用以下mediaquery有很多例子

@media only screen (max-device-width: 1023px) {
  .content { // Your div's class name to hide
     display: none;
  }
}

---

这里不需要javascript，使用CSS。