javascript - 带有隐藏/显示的 jquery 屏幕

Question

我想在屏幕尺寸大于700px时隐藏一个div，只有在屏幕尺寸小于700px时才显示；

这是我尝试使用 jQuery 3 实现的代码

jQuery(document).ready(function() {
    if ((screen.width>701)) {
        $(".mobile-section").css('display', 'none'); $(".yourClass").hide();
    }elseif ((screen.width<=699))  {
        $(".mobile-section").css('display', 'block'); 
    }
});

它不起作用 --- 我做错了什么吗？？

Answer 1

如果你只想尝试使用 CSS 媒体查询，那么在这里使用 javscript/JQuery 真的没有意义

.mobile-section {
  display: none;
  background-color: orange;
}

@media screen and (max-width: 700px) {
  .mobile-section {
    display: block;
  }
}

<div class="mobile-section">
  hello mobile section
</div>

Check out this fildde and resize the viewable area