Question

我在图像上创建了一个文本块，但是当我在iPad和iPhone上检查该站点时，图像仍然可以，但是文本会移动。如何使该文本具有响应性？

这是我使用的代码：

    <style>
.container {
  position: relative;
  font-family: Arial;

}

.text-block {
  position: absolute;
  bottom: 20px;
  left: 95px;
  right: 740px;
  background-color: white;
  opacity: 0.75;
  color: black;
  padding-left: 20px;
  padding-right: 20px;
}

</style>
</head>
<body>
<div class="container">
  <center><img src="http://test.preci-dental.be/wp-content/uploads/2019/01/helping-your-child-trust-the-dentist-1110x450-1024x415.jpg" alt="Nature" style="width:90%;"></center>
  <div class="text-block">
<h1 style="color:#749C91;">Preci-Dental</h1>
    <br><p style="color:black;">Welkom bij tandartspraktijk Preci-Dental. De groepspraktijk werd door Liesbeth en Karel opgericht in 2019 en is gevestigd in Bertem, gelegen tussen Leuven en Brussel. Bij Preci-Dental streven we naar moderne mondzorg op maat voor iedereen: precieze en persoonlijke service, gebaseerd op bewezen efficiënte en moderne technieken.</strong></p>
  </div>
</div>

提前谢谢！

Answer 1

如果您不介意使用媒体查询，我想这应该可以解决您的问题：

PS：我使用“！important”是因为我通过插件注入了代码。在您的情况下，可能不需要。

我还假设您要在媒体查询中将文本区域设为视口宽度的70％，将600px作为最大宽度。因此，当您的视口宽度小于600px时，该代码将覆盖此选择器的CSS。

关于媒体查询：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

@media only screen and (max-width: 600px) {
  .text-block {
    left: auto !important;
    right:auto !important;
    min-width:70vw;
  }
}

如何使图像上的文本块响应？

1 个答案: