图片上的文字 - Make对较小的屏幕有反应

我对编程非常陌生，我试图修改我的Retina模板以自定义Shopify商店。迄今为止很有趣，并且取得了不错的成绩！图片上的文字 - Make对较小的屏幕有反应

但是我坚持这个问题：如何让我的代码响应？

我设法添加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）

来源

2016-09-22 Pauline Spiess

没有H7标签。只有H1-H6。 –

通常，您需要使用媒体查询来做到这一点，或JavaScript。你可以使用'vw'（视点单位），但它们在这里可能不合适。 –

你不应该只是下一个级别的标题，因为其他人正在使用。标题应按层次顺序使用。感觉这个TEXT有多重要，以及它如何符合标题方面的阅读顺序。它是否需要成为标题标签？ – Lee

您可以通过媒体查询来实现它。

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

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

来源

2016-09-22 15:50:02 jobinrjohnson

如果您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>

来源

2016-09-22 16:44:35

图片上的文字 - Make对较小的屏幕有反应

回答

相关问题