html - 希望文本叠加对其背景做出响应

Question

我有一个背景，我想在上面放置文字。它有点响应，但如果我在较小的屏幕上查看它，文本会溢出图像。我想让文本的大小适应缩小的大小。

HTML:

<div className="row">
    <div className="col-md-12 text-overlay-container">
        <span className="text-overlay">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        </span>
        <img className="d-block w-100 gradient-img" src="../images/slanted-gradient-background.png" alt="" />
    </div>
</div>

CSS:

.text-overlay-container {
    position: relative;
    text-align: center;
    color: white;
}

.text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
}

Answer 1

您的答案是使用 Typical Device Breakpoints: 的响应式网页设计媒体查询

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

---

此示例将允许您根据运行网页的设备屏幕重新缩放您的网页内容。

Also take a look to this specific Example