Question

我找到了这个主题Hide A DIV if screen is narrower than 1024px，我希望得到类似下面引用代码的东西，这种响应的代码：如果窗口较窄则隐藏一个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

您可以在此链接上使用Media Queries示例

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

使用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 Media Queries

上有很多例子

Answer 2

在css中应用以下媒体查询

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

如果窗口窄于DIV，则隐藏DIV并替换为DIV

2 个答案: