javascript - 仅在具有jquery或css的小屏幕上显示div

我只想在小屏幕上显示这个html代码。

<div id="NightDiv" class="w3-center" style="padding-top:20px"><i id="nightMode2" class="fa fa-moon-o fa-lightbulb-o w3-cursor-pointer w3-amazon"  aria-hidden="true"></i>
</div>

这就是我一直在努力但没有成功的原因：

$(document).ready(function() {

if ((screen.width>=1024) ) {
 $("#NightDiv").hide();
}
else {
 $("#NightDiv").show();

}
});

最佳答案

这不需要JavaScript。使用CSS媒体查询来执行此操作，

/*Hide for larger screens*/
#NightDiv {
   display: none;
}

/*show for small screens */
@media screen and (max-width: 1023px) { /* I've given 1023px but you can change to proper width */
    #NightDiv {
        display: block;
    }
}