javascript - 在调整大小时更改导航栏标题颜色

Question

我对前端编码非常陌生。我正在使用 Bootstrap 3 创建自己的响应式网站。

当我调整浏览器窗口大小时模拟手机屏幕大小时，我希望导航栏颜色(导航标题颜色？)在单击菜单图标时变为白色。

我希望它在页面加载时保持透明，这很有效。我希望标题在滚动时变为白色，这也有效。单击汉堡菜单图标时，可折叠导航标题会下拉以显示菜单项，但背景保持透明，导致菜单项位于下方内容之上。

我编写了以下脚本，但它似乎不起作用。有人有什么建议吗？

<script>
    var windowsize = $(window).width();
    $(window).resize(funtion() {
        windowsize = $(window).width();
            if (windowsize < 440) {
                $("#myNavbar").click(function () {
                  $(".navbar-header").css({"background-color": "#ffffff", "-webkit-box-shadow": "0px 1px 4px 0px rgba(180, 180, 180, 0.5)", "-moz-box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)", "box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)"});
                });
            };
      });
</script>

Answer 1

您可以使用 Media Queries在您的 CSS 文件中获取您需要的内容。

@media screen and (max-width: 300px) {
    nav {
        background-color: #ffffff;
    }
}