html - 更大的标题文本用于更高分辨率的显示

Question

我在图像上覆盖了标题文本。问题是在更高分辨率的桌面屏幕上(例如，> 1600px)，标题只占图像宽度的一小部分。无论分辨率如何，我都希望标题文本占据可用宽度的 ~90-100%。

http://www.dailyspiro.com

<div class="container-fluid">
    <div class="col-md-12 landing-container">
        <img src="images/pig.jpg" class="main-image" width="70%">
        <div class="uvp">
            <h1>Spread Compassion & Track Your Impact</h1>
            <button class="join-button">Join Now</button>
        </div>
    </div> 
</div>

.uvp {
    padding: 5px 5px 5px 14px;
    width: 70%;
    background: rgba(66,51,51,.77);
    margin: -119px auto 0px auto;
    display: block;
    text-align: left;
}

.uvp h1 {
    color: #fff;
    font-size: 247%;
    margin-top: 12px;;
}

.landing-container {
    padding: 0;
    margin: -15px auto 0 auto;
    text-align: center;
}

.main-image {
    z-index: -1;
    position: relative;
}

Answer 1

如果您希望页眉占用约 90-100% 的可用宽度空间以用于更高分辨率的桌面屏幕(例如，> 1600 像素)，请使用特定的媒体查询相应地设置页眉样式。

您可以使用媒体查询，标准设备的一些媒体查询是:

    /* Large screens ----------- */
    @media only screen 
    and (min-width : 1600px) {
    /* Styles */
/* Set your font-size here */


    }