html - 如何根据屏幕大小更改导航栏背景颜色？

问题描述

在大屏幕上我有半透明的导航栏，但是当它在小屏幕上折叠时很难阅读，因为导航栏会扩展我的内容，所以我想更改导航栏的背景颜色，但仅限于 sm 和 xs 屏幕. 我怎样才能做到这一点？

我的 HTML 代码：

<nav class="navbar navbar-expand-xl navbar-light ">

<a class="navbar-brand d-flex align-items-center" href="/">
    <a class="navbar-brand" href="/"><img src="img/cattery/full_trimmed_transparent_base (3).png" width="381"height="76" class="d-inline-block mr-1 align-bottom" alt=""></a>
</a>

<button class="navbar-toggler small-screen-navbar" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false" aria-label="Przełącznik nawigacji">
    <span class="navbar-toggler-icon "></span>
</button>

<div class="collapse navbar-collapse" id="mainmenu">

    <ul class="navbar-nav ml-auto">

        <li class="nav-item active">
            <a class="nav-link" href="/s"> S</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="/o"> O ...</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#"> ...</a>
        </li>

        <li class="nav-item">
            <a class="nav-link " href="#"> ...</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#"> ...</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#">...</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="/kontakt"> ...</a>
        </li>
    </ul>
    <ul class="navbar-nav sm-icons">
        <li class="nav-item"><a class="nav-link" href="https://www.facebook.com/Hodowla-...>
            <i class="fab fa-facebook-square icon"></i></a>
        </li>
    </ul>
</div>

我也做了自己的课，但我不知道如何使用它

.small-screen-navbar{
    background-color: rgba(240,240,240,1.0) !important ;
}

标签： htmlcssnavbarresponsivebootstrap-5

请看一下所谓的媒体查询，它们正是用于这些事情的。

我会使用 MDN 作为参考：

MDN 媒体查询

例如：

@media screen and (max-width: 480px){
 .small-screen-navbar{
background-color: rgba(240,240,240,1.0) !important;
/*ADD OTHER PROPERTIES */
   }
}

我还注意到您正在使用Bootstrap 5并且 Bootstrap 有断点 -

html - 如何根据屏幕大小更改导航栏背景颜色？

问题描述

解决方案

推荐阅读