Как сохранить текст с разным размером шрифта отзывчивым

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

}

Ответ №1:

задайте медиа-запрос и соответствующий размер шрифта

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

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

}

}

1. В моем CSS-листе я заменил свой класс .subheaderposition вашим mediaquery. Теперь мой размер шрифта черный, не позиционируется и не имеет заголовка fontstyle….am я что-то упустил?

2. Вы добавляете свои соответствующие стили в запрос, который я приводил в качестве примера.

Ответ №2:

вам нужно установить размер шрифта в em следующим образом,

           body { font-size: 2em; }