Question

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

以下是该网站的链接： 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;。并且您必须更改宽度/最大宽度，否则文本在徽标下方时将没有空间。

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

响应头标志与文本

1 个答案: