Question

这是我正在使用的当前代码，当屏幕缩小以在移动设备中查看时，我想将navbar类变成navbar-inverse类

        <button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
            <span class="navbar-toggler-icon"></span>
            <span class="navbar-text">Hello</span>
        </button>

          <div class="collapse navbar-collapse" id="collapse_target">
            <ul class="nav navbar-nav ml-auto" >
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home </a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Bio</span></a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Tour </a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Videos </a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Media </a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
    </nav>

我尝试使用媒体查询，但是在每个查询中都无法选择不同的类

Answer 1

有几种方法可以实现，这是其中两种。

根据屏幕尺寸（例如：<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />）加载CSS StyleSheets。您可以在新的StyleSheet中定义反色
使用@media（）查询（在此处了解如何使用它们：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries）

希望这会有所帮助。

Answer 2

您可以通过CSS媒体查询进行样式管理，这将是最快且标准的方式

另一个解决方案，您可以通过javascript或jQuery库更改类名

希望此脚本将帮助您删除和添加类

var targetElement = document.getElementById("demo");

window.addEventListener("resize", myFunction);
window.addEventListener("load", myFunction);
function myFunction() {
  var wWidth = window.innerWidth ;
   if( wWidth < 500 ) {
targetElement.classList.add("below500");
targetElement.classList.remove("above500");
   }else{
targetElement.classList.add("above500");
targetElement.classList.remove("below500");
   }
}

Answer 3

我为您创建了一个快速演示。请检查一下。

https://codepen.io/rhythm19/pen/GaOVPY

navbar-light bg-light和navbar-dark bg-dark是根据窗口大小切换的主要类。我已经使用jquery来切换类。您甚至可以使用任何自定义类，并通过媒体查询覆盖背景和文本颜色。

如何对不同大小的设备使用不同的导航栏类？

3 个答案: