圖片上的文字 - 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對較小的屏幕有反應

回答

相關問題