CSS显示块并以低分辨率隐藏另一个

Question

我试图隐藏导航栏并在分辨率较低时显示其他内容并显示小屏幕（移动设备）

我确实设法隐藏了导航栏，但另一件事不会显示。

@media only screen and (max-device-width: 500px) {
        .small-menu {
        display: block;
        }

        .regular-menu {
        display: none;
        }


    }


@media only screen and (max-width: 1279px) {

        .small-menu {
        display: block;
        }

        .regular-menu {
        display: none;
        }

}


    .small-menu {
        display: none;
    }

    .regular-menu {
        display: block;
    }

Answer 1

写下你的css这个seqvence

1. 写入您的漏洞页面css
2. 写信给您的css max-width 1279
3. 写信给您的css max-device-width 500

      .small-menu {
            display: none;
        }

        .regular-menu {
            display: block;
        }


    @media only screen and (max-width: 1279px) {

            .small-menu {
            display: block;
            }

            .regular-menu {
            display: none;
            }

    }


    @media only screen and (max-device-width: 500px) {
            .small-menu {
            display: block;
            }

            .regular-menu {
            display: none;
            }


        }



      

<div class="samll-menu">This is small menu</div>
<div class="regular-menu">This is regular-menu</div>