javascript - 使用 jquery 或 css 仅在小屏幕上显示 div

Question

我想只在小屏幕上显示这段 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();

}
});

Answer 1

为此您不需要 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;
    }
}