html - 当屏幕达到一定宽度(像素)时显示图像

我有一个设置为“显示：无；”的汉堡图标。当我到达页面上的某个宽度时，我希望它再次出现。我该怎么做呢？

//// \\\\

    <section class="topMenu container row u-full-width">
    <section class="twelve columns center">
        <header>
            <ul class="topMenuList">
                <li><a href="index.html">Home</a></li>
                <li><a href="#MCSA">MCSA</a></li>
                <li><a href="#MCSE">MCSE</a></li>
                <li><a href="#MTA">MTA</a></li>
                <li><a href="#SQL">SQL</a></li>
                <li><a href="#Programming">Programming</a></li>
                <li><a href="#Office">Office</a></li>
                <li><a href="#DesktopSupport">Desktop Support</a></li>
                <li><a href="#Server">Server</a></li>
                <li><a href="#Classroom">Classroom</a></li>
                <li><a href="#FreeBrochure">Free e-Brochure</a></li>
                <li><a href="contact.html">FREEPHONE: 0800 677 1232</a></li>
            </ul>
            <a href="#"><div class="hamburger"></div></a>
        </header>
    </section>
</section>

//// \\\\

 .hamburger {
    display: none;
    content: url('../images/iconHamburger.png');
}


    @media only screen and (max-width: 850px) {
    header ul li a{
        display: none;
    }

.hamburger {
    content: url('../images/iconHamburger.png');
}

我正在尝试创建一个响应式菜单，当屏幕达到一定尺寸时，该菜单将消失，并替换为一个图标，该图标会下拉菜单。

最佳答案

.hamburger {
    display: none;
    content: url('../images/iconHamburger.png');
}


    @media only screen and (max-width: 850px) {
    header ul li a{
        display: none;
    }


.hamburger {
    content: url('../images/iconHamburger.png');
    display: block;
  }
}

关于html - 当屏幕达到一定宽度(像素)时显示图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29277763/