Question

我的网站是www.onlinestaff.net

我之前发布了一个关于我的网站横幅的问题，并通过我的glasslogo.png获得了一个解决方案，我感谢你，但整个横幅看起来并没有在我缩小屏幕时调整大小，即文字和两个按钮。

我不知道我是否需要将横幅背景设为图像，而不是使用div作为图像，因为我需要横幅作为一个整体，图像，文字和按钮变得更小以适应平板电脑和手机等页面。

这是HTML

<div class="thebanner">
    <h123>
        <span>A Free Admin,<br> Moderator, Freelancer & Writer Job Board.<br> <span class='spacer'></span>
    </h123>

    <buttonz>
        <span>
            <a href="http://onlinestaff.net/staff-required" class="Button1">Search for staff</a>
            <span class='spacer'></span>
    </buttonz>

    <buttonz2>
        <span>
            <a href="http://onlinestaff.net/work-required" class="Button1">
                Search for work
            </a>
            <span class='spacer'></span>
    </buttonz2>

    <div class="bannerimage" id="bannerimage">
        <img src="/glasslogo.png">
    </a>
</div>

Answer 1

我很确定你对CSS中的媒体查询有所了解。您可以使用特定屏幕尺寸的媒体标签以及特定断点，如下例所示：

@media only screen and (max-width: 500px) {
body {
    background-color: lightblue;
}

}

苦苦挣扎的响应式横幅

1 个答案: