Question

我有一些文字我想缩放然后向上移动，以便在移动设备上拍摄图像。

<style>
    #rcontainer {
    height: 340px;
    width: 100%;
    position: relative;
}


.rtext span {
    position: absolute;
    bottom: 130px;
    font-family: "Georgia", serif;
    font-size: 1.8em;
    color: white;
    padding: 0 40px;
    width: 100%;
    line-height: 110%;
}

@media screen and (min-width: 0px) and (max-width: 720px) {
    .rtext {
        font-size: 50%;
        padding: 0 40px 100px 0;
    }
</style>


 <div id="rcontainer">
    <img alt="" src="/portals/0/Images/photos/rexanne_griffeth_contact_info_850.png" />
<p class="rtext">
    <span>Contact: Rexanne Griffeth<br />
    6000 Hospital Drive<br />
    Hannibal, MO  63401<br />
    (573) 629-3564<br />
    rexanne.griffeth@hrhonline.org
 </span></p>
</div>

我试图调整字体大小（适用于我的媒体查询，但我似乎无法将文字向上移动到图像上。

这是我的开发网址。 current results

Answer 1

更改媒体查询中的bottom属性：

@media screen and (min-width: 0px) and (max-width: 720px) {
.rtext {
    font-size: 50%;
    padding: 0 40px 100px 0;
    bottom: 220px
}

媒体查询大小调整和定位字体

1 个答案: