显示尺寸减小时，同时调整图像和文本的大小

Question

我开发了一个网站，现在我必须让它响应。我几乎已经完成了，但下面的div我不能这样做。

    <div class="menu-top-menu-container">
<ul class="topmenu" id="menu-top-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37" id="menu-item-37">
        <a href="http://localhost/safesteps/why/">Why |</a>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39" id="menu-item-39">
        <a href="http://localhost/safesteps/our-ambassador/">Our Ambassador |</a>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40" id="menu-item-40">
        <a href="http://localhost/safesteps/get-involved/">Get Involved |</a>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38" id="menu-item-38">
        <a href="http://localhost/safesteps/partners/">Partners |</a>
    </li>
    <li class="youtube_menu menu-item menu-item-type-custom menu-item-object-custom menu-item-53" id="menu-item-53">
        <a href="https://www.youtube.com/" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;</a>
    </li>
</ul>

我已经使用像这样的媒体查询来应用CSS

@media only screen and (max-width: 760px) {
    ul.topmenu a{
        position: relative;
        display: inline-block;
        font-size: 4vw;
    }
    .youtube_menu{
        top:4px;
        background-size: cover;
    }
}

但是这个css正在为文本工作，并且当浏览器大小减小时它会重新调整大小。但对于YouTube徽标，它仍然是相同的。

请告诉我如何解决这个问题。

Answer 1

如果您想更改YouTube徽标的尺寸，请将其放在 img 标记中，然后在浏览CSS中更改 width 和 height

或者，如果您想将其保留为背景图片，请将其放入相对位置包装中，并将绝对定位应用于there等徽标。