带有文本的响应式 header 徽标

Question

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

这里是 link 网站： jeepscycleclub.x10host.com

这是我的 css #pageheader:

#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;。而且你必须更改width/max-width，否则在徽标下方的文本将不会有space。

#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>

带有文本的响应式 header 徽标

responsive header logo with text

html

css

responsive