Question

我对编程非常陌生，我试图修改我的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）

Answer 1

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

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

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

Answer 2

如果你在shopify中制作自定义css，那么你需要图片和文字响应

以下是您的答案，使他们都具有回应性Live On FIDDLE。

＆＃13;

  .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;
  }
}

＆＃13;

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

＆＃13;

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

2 个答案: