CSS/jQuery - 显示：none 基于浏览器大小

Question

在我正在开发的网站上，我有 2 个登录框。一个在侧边栏中，一个漂浮在屏幕右侧的固定位置。如果浏览器宽度超过 1360px，我只想显示向右浮动的登录框。如果宽度低于那个宽度，我只想在侧边栏中显示一个。

我一直在尝试使用 jQuery 来做到这一点：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
 if ( $(window).width() > 1360) { 
  $("#sidelog").css({"display": "none"});
 } else {
  $("#memberbox").css({"display": "none"});
 }
</script>

#sidelog 是侧边栏登录框，#memberbox 是浮动的。

我不确定为什么它不起作用 - 我只是一个初学者！哈哈

有人可以帮我吗？

Answer 1

CSS media queries

#sidelog { display: block; }
#memberbox { display: none; }
@media (min-width: 1361px) {
    #sidelog { display: none; }
    #memberbox { display: block; }
}

CSS/jQuery - 显示：none 基于浏览器大小

CSS/jQuery - Display: none based on browser size

html

css

jquery

width