根据不同的媒体查询而改变内容

这是对这个问题的第二次尝试，因为自从我上次提出这个问题以来，我一直在努力解决这个问题，所以希望这次我会更有意义。根据不同的媒体查询而改变内容

我为即将推出的页面创建响应式布局。主体标题根据浏览器和设备的大小而变化。

<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

根据不同的媒体查询而改变内容

回答

相关问题