Question

我有：

<div style="min-width: 1000px;">
    <p>
        Some text
    </p>
    <div class='div_img_left'>
        <img src="images/sth.png" alt="missing image" style="max-width: 100%;">
        <footer>My caption</footer>
    </div>
</div>


.div_img_left {
    max-width: 50%;
    float: left;
    margin-right: 30px;
    margin-bottom: 2em;
    text-align: center;    
}

在我的电脑屏幕上看起来很好。当我在手机上打开它时，问题就开始了。我想这里的问题是手机屏幕宽度不是1000px。所以一切都在缩小。问题是＆＃34;有些文字＆＃34;看起来很好。很遗憾＆＃34;我的标题＆＃34;收缩明显更多。我该如何解决这个问题？

我尝试使用其他几何约束，但我失败了。特别是使用％或min-height。

Answer 1

如果您想拥有自适应网站，请使用媒体查询，并且不要将内容设置为如此大的min-width。使用vw表示宽度。

.div_img_left {
  max-width: 50vw;
  float: left;
  margin-right: 30px;
  margin-bottom: 2em;
  text-align: center;
  
}
figcaption {
  font-size: 1em;
  line-height: 1.3;
  text-align: center;
}
@media (max-width: 500px) {
  figcaption {
    font-size: 14px;
    line-height: 1
    min-width: 100%;
  }
  figure {
    min-width: 100vw;
  }
}

<div style="width: 100%;">
  <!--changed from min-width: 1000px-->
  <p>
    Some text
  </p>
  <figure class='div_img_left'>
    <img src="http://placehold.it/150x200/eea/e00?text=150x200" alt="missing image" style="max-width: 100%;">
    <figcaption>My caption</figcaption>
  </figure>
</div>

图像标题（文本）与图像一起显着缩小

1 个答案: