html - 带有文本的响应式标题 Logo

Question

我希望在移动设备上查看时更改标题。大屏幕上显示的是 Logo 和旁边的文字。在移动设备上，我希望文本位于 Logo 下方，甚至可能只有 1 行，中间有一个元素符号。现在，当我在移动设备上查看时， Logo 和文本会调整大小，但文本变得太大并从屏幕上掉下来。

这是该站点的链接:jeepscycleclub.x10host.com

这是我的#pageheader 的 CSS:

#pageheader {
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    position: relative;
    text-align: center;
    overflow: hidden;
    background-color: #2f2f37;
    max-height: 15vh;
}

    #pageheader img {
        max-height:15vmax;
    }

和我的 html:

<div id="pageheader">
<img src="images/pageheader.gif">
    <header>
    <h2 style="font-size: 3vh;">Club Info: 316-755-0909</h2>
    <h2 style="font-size: 3vh;">FM 100.9 for Race PA System</h2>
    </header>
</div>

这只是我的测试站点，因此我可以在使用它之前完成所有工作。

提前谢谢你。

Answer 1

为此添加flex-wrap: wrap;。并且您必须更改宽度/最大宽度，否则当文本位于 Logo 下方时将没有空间。

#pageheader {
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    position: relative;
    text-align: center;
    overflow: hidden;
    background-color: #2f2f37;

    flex-wrap: wrap;
}

    #pageheader img {
        max-height:15vmax;
    }

<div id="pageheader">
<img src="http://placehold.it/150x80/a0f">
    <header>
    <h2 style="font-size: 3vh;">Club Info: 316-755-0909</h2>
    <h2 style="font-size: 3vh;">FM 100.9 for Race PA System</h2>
    </header>
</div>