我在图像上创建了一个文本 block ，但是当我在 iPad 和 iPhone 上查看网站时，图像保持正常，但文本移动了。 我怎样才能让这个文本响应？
链接:http://test.preci-dental.be/home/
这是我使用的代码:
<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>
提前致谢!
最佳答案
如果您不介意使用媒体查询，我想这应该可以解决您的问题:
PS:我使用了“!重要”，因为我通过插件注入(inject)了代码。您的情况可能不需要。
我还假设您希望文本区域占视口(viewport)宽度的 70%，媒体查询中的最大宽度为 600px。因此，当您的视口(viewport)宽度小于 600 像素时，代码将覆盖此选择器的 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;
}
}
关于html - 如何使图像上的文本 block 响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54317968/