屏幕缩小时试图隐藏徽标

Question

嗨我的导航栏中有一个徽标我试图在屏幕低于1024时隐藏它我尝试了3种方法但没有一种方法可行，我使用了以下js

$(document).ready(function() {
  $(window).resize(function() {
    if ($(this).width() < 1024) {
      $('.miniLogo').hide();
    } else {
      $('.miniLogo').show();
    }
  });
});

我也试过设置css

@media screen max-width: 1024px {
.miniLogo {
    display: none!important;
  }
}

任何想法？理想情况下，跨浏览器兼容

Answer 1

@media screen and (max-width: 1024px){
            .miniLogo {
                          display: none!important;
                           }
               }

应该做的工作

Answer 2

尝试将CS​​S更改为：

@media screen and (max-width: 1024px) {
  .miniLogo {
    display: none !important;
  }
}

Answer 3

你很接近，你只需要稍微改变你的媒体查询。而不是：

@media screen max-width: 1024px {

使用：

@media screen and (max-width: 1024px) {

你应该全力以赴！

Answer 4

这应该用于隐藏徽标。试试......

@media (max-width: 1024px) {
   /* Hide logo */
   .miniLogo {
       display: none !important;
   }
}

Answer 5

我最后用过这个

$(window).resize(function() {
  if ($(this).width() < 1600) {
    $('.miniLogo').hide();
   } else {
    $('.miniLogo').show();
   }
});