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

我试图在全幅图像上显示一些不同字体大小的文本。 然而，一旦我的浏览器窗口变小，我的文本就会崩溃，我的标题就会与我的副行混在一起。 如何编写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;

}

---

您需要像这样设置em中的字体大小

          body { font-size: 2em; }

---

进行媒体查询并相应地设置字体大小

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

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

}

}

---

在我的css工作表中，我用mediaquery替换了.subheaderposition类。现在我的fontsize是黑色的，没有定位，也没有标题fontstyle…我缺少什么吗？你在我举个例子的查询中添加了各自的样式。我尝试了它们，但当我使浏览器窗口变小时，文本仍会折叠