图像上的文字 - Make 可以响应较小的屏幕答案

【问题标题】：Text over Image - Make is responsive for smaller screens图像上的文字 - Make 可以响应较小的屏幕
【发布时间】：2016-09-22 15:30:12
【问题描述】：

我对编程非常陌生，我正在尝试修改我的 Retina 模板以自定义我的 Shopify 商店。到目前为止，它很有趣，并且取得了很好的效果！

但是我被困在这个问题上：如何让我的代码响应？

我设法添加了 HTML 和 CSS 代码以在图像上显示文本，但我不知道如何让它响应（文本自动调整其大小）以适应较小的屏幕（例如移动设备）

HTML 代码

<div class="textoverimage">
    <img src="xxxxxx" alt="xxxx"> 
    <h7> TEXT </h7>
</div>

CSS 代码：

/* #Custom Styles
================================================== */

.textoverimage { 
   position: relative; 
   width: 100%; 
}

h7 { 
   position: absolute; 
   top: 75px; 
   left: 0; 
   width: 100%; 
  text-align: center;
}

我使用 h7 不干扰任何预先存在的代码（Shopify 使用 h1-h6）

【问题讨论】：

没有H7标签。只有 H1-H6。
通常，您需要媒体查询或 javascript。您可以使用vw（视点单位），但它们在这里可能不合适。
您不应该只使用下一级标题，因为其他标题正在使用中。标题应按层次顺序使用。感受这个文本的重要性，以及它如何符合标题的阅读顺序。它是否需要成为标题标签？

标签： html css shopify

【解决方案1】：

您可以通过媒体查询获得它。

@media only screen and (max-width:500px) {
    h7 {
        font-size:14px;
    }
}

当屏幕宽度下降到500px以下时，这将使h7的字体大小为14px。

【讨论】：

【解决方案2】：

如果您在 shopify 中制作自定义 CSS，那么您需要图像和文本响应式

这是使他们都响应Live On FIDDLE的答案。

  .img-reponsive {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.textoverimage {
  position: relative;
}

p.title {
  position: absolute;
  top: 75px;
  left: 0;
  text-align: center;
  font-size: 38px;
  width: 100%;
  color: #fff
}

@media only screen and (max-width: 767px) {
  p.title {
    font-size: 1.5em;
    line-height: 1.5em;
  }
}

@media only screen and (max-width: 479px) {
  p.title {
    font-size: 1.1em;
    line-height: 1.1em;
  }
}

 <div class="textoverimage">
  <img class="img-reponsive" src="http://cdn.shopify.com/s/files/1/0258/1101/t/2/assets/slideshow_3.jpg?5808719635421587686" alt="xxxx">
  <p class="title"> TEXT </p>
</div>

【讨论】：