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

使用视口宽度vw测量可基于视口动态调整字体大小。看看这个非常基本的CodePen example。

.text-overlay-container {
    position: relative;
    text-align: center;
    color: white;
}
    
.text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    font-size: 3.5vw;
}

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

Answer 2

您可以使用媒体查询来减小某些断点的大小，例如：

@media only screen and (max-width: 767px) {
  .text-overlay {
    font-size: 75%;
  }
}

或者您可以使用calc和vw单位在屏幕宽度上缩放文本，这需要一些调整才能正确显示，例如（简单示例）：

.text-overlay {
  font-size: calc(16px + 2vw);
}

这意味着最小字体大小为16px，外加2vw单位。

有关此技术的更多信息（包括更准确和更复杂的示例）： https://css-tricks.com/snippets/css/fluid-typography/

Answer 3

您的答案是使用Typical Device Breakpoints:

的响应式Web设计媒体查询

/* 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) {...}

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

也看看这个具体 Example

希望文字叠加层能够响应其背景

3 个答案: