Question

我在图片上叠加了标题文字。问题在于，在更高分辨率的桌面屏幕上（例如，> 1600px），标题仅占用图像宽度的一小部分。我希望标题文本占用可用宽度的~90-100％，而不管res。

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％（例如，> 1600px），请使用特定的媒体查询相应地设置标题样式。

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

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


    }

Answer 2

CSS：

/* Large screen above 1400px  */

@media only screen and (min-width: 1400px) {

    body {

        .uvp h1 {
            font-size: your larger size here;
            margin-top: your larger size here;
        }
    }
}

注意：您在上面的margin-top标记中有双（;;）分号。

Answer 3

使用cssmediaqueries

CSS媒体查询是CSS3中的一项功能，允许您指定何时应该应用某些CSS规则。这允许你申请一个移动专用CSS，或调整打印布局。

@media only screen and (max-width: 1633px) and (min-width: 1400px) {
 .uvp h1 {
         color: #fff;
    font-size: 247%;  //use your desired bigger font size
    margin-top: 12px;;
     }
}

更高分辨率显示的更大标题文本

3 个答案: