Question

我正在尝试在全宽图像上显示一些具有不同字体的文本。然而，只要我的浏览器窗口变小，我的文本就会崩溃，我的标题会与我的子线混淆。我如何编写我的CSS，以便我的文本在较小尺寸的窗口中显示时保持成比例。

   .wrap {
    max-width:100%;
    min-width:280px;
    margin:auto;
    position:relative;
}
.wrap img {
    width:100%;
    height:auto;

}
.caption {
    position:absolute;
top:5px;
left:0;
right:0;
bottom:10px;
    overflow:auto;
}
.caption-inner {
    display:table;
    width:100%;
    height:100%;
}
.caption-content {
    display:table-cell;
    vertical-align:middle;

}
.headerposition {
        color:#ffffff;
    font-size:375%;
        word-wrap: break-word;
        position:absolute;
        left:21%;
        bottom:15%;
        top:29%

}
.subheaderposition {
        color:#ffffff;
    font-size:140%;
        position:absolute;
        left:21%;
        bottom:15%;
        top:45%;

}


.caption-content p {
        font-family: Century Gothic,Arial, Helvetica, sans-serif;
        color: #ffffff;
        margin:0 50px;
    background:rgba(255,255,255,0.4);
        padding:10px;

}

Answer 1

您需要像这样设置字体大小，

          body { font-size: 2em; }

Answer 2

有媒体查询并相应地具有字体大小

@media only screen and (max-width: 320px) {

      .subheaderposition {
        color:#ffffff;
    font-size:180%;
        position:absolute;
        left:21%;
        bottom:15%;
        top:45%;

}

}

如何保持不同字体大小的文本响应

2 个答案: