javascript - 如果窗口窄于

Question

我发现这个主题如果屏幕比 1024px 窄，则隐藏一个 DIV，我想得到与下面引用的代码类似的东西，这种响应的代码：隐藏一个 div（id="krug_wide"）如果窗口更窄然后1280px 并将隐藏的 div 替换为另一个（ id="krug_small" ）。

我还发现了与上述主题相关的页面http://www.fryed.co.uk/labs/resize_div_on_window_resize 。我仍然无法弄清楚正确和适当的语法，但我相信这对你来说是“小菜一碟”。

先感谢您。

$(document).ready(function () {

    var screen = $(window)    

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

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

});

Answer 1

您可以使用此链接上的示例媒体查询

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

在 CSS 上

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

或者创建不同的 CSS

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

你有很多关于W3C 媒体查询的例子

Answer 2

在 css 中应用以下媒体查询

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