根據不同的媒體查詢而改變內容

這是對這個問題的第二次嘗試，因爲自從我上次提出這個問題以來，我一直在努力解決這個問題，所以希望這次我會更有意義。根據不同的媒體查詢而改變內容

我爲即將推出的頁面創建響應式佈局。主體標題根據瀏覽器和設備的大小而變化。

<h1><span class="main__header--changer">COMING SOON</span></h1>

...和CSS

@media (max-width: 75em) { 
     h1:before { 
      content: "HOLD ONTO YOUR HATS"; 
     } 
     .main__header--changer { 
      display: none; 
     } 
} 

@media (max-width: 64em) { 
     h1:before { 
      content: "NOT LONG TO GO"; 
     } 
     .main__header--charger { 
      display: none; 
     } 
}

...等和兒子，未來的不同變化很快含有較少的字母大小下山，一直到「近了」。

我這樣做的唯一方法是屏幕閱讀器不會讀取標題，因爲顯示：無。有沒有不同的方式來隱藏標題，但不是屏幕閱讀器，但內容是從CSS顯示？

感謝

來源

2013-02-22 Darren Reay

爲什麼不使用JavaScript？或者隱藏div -s並在某個地方顯示它們（'display：block/none;'）？ – Vucko 2013-02-22 16:00:52

我想只是使用HTML和CSS，如果我可以，因爲我對JavaScript不太自信。是的，我想把不同的標題放在div中會起作用，並沒有真正想到這一點。乾杯 – 2013-02-22 16:05:43

只是想到，雖然源代碼看起來很亂。這就是我選擇使用內容的原因：「」首先。 – 2013-02-22 16:08:01

您可以創建碰撞使用的利潤率或text-indent屬性的屏幕顯示區域之外的內容方式的隱藏效果。這些方法不是我所說的100％乾淨，但至少讓你的HTML標記保持整潔。

看看這個helpful thread，它解釋了屏幕閱讀器與CSS隱藏元素的交互。

我還假設在你的CSS中的第二個參考你的意思是--changer而不是--charger。

請注意，如果聲明：.main__header--changer {display: none;}在所有媒體查詢中都是相同的，那麼您應該考慮在任何查詢之外寫入一次，以便它在應用程序中通用且不會重複。

希望這對我有幫助！

來源

2013-02-23 06:32:29 kevincoleman

感謝您的回覆，但是當我縮進h1時，它也會在內容前拉動div：使用它。沒有什麼我可以做的溢出：隱藏的H1？是的，它意味着變革者。該鏈接非常有用，謝謝。 – 2013-02-23 13:10:16

您可以將H1的高度屬性設置爲0，然後將溢出設置爲隱藏，而不是將內容暴露在屏幕外。 – kevincoleman 2013-02-24 00:49:13

噢......經過進一步閱讀，看起來屏幕閱讀器通常會忽略0寬度/高度的內容。我建議通過將寬度和高度設置爲1px來避開這種情況（並且如果任何文本碰巧落在該1px空間中，則會增加行高度）。 – kevincoleman 2013-02-24 00:58:41

根據不同的媒體查詢而改變內容

回答

相關問題