0

这是这个问题的第二次尝试，因为自从我上次问以来我一直在研究这个问题，所以希望这次我会更有意义。

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

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

... 以此类推，即将到来的不同变体包含的字母随着大小的减小而减少，一直到“nigh”。

我这样做的唯一方式意味着屏幕阅读器不会因为显示而阅读标题：无。是否有其他方法可以隐藏标题，但不是从屏幕阅读器中显示，而是从 CSS 中显示内容？

谢谢

4

1 回答 1

0

您可以通过使用边距或 text-indent 属性将内容凸出到屏幕显示区域之外来创建隐藏效果。这些方法并不是我所说的 100% 干净的，但它们至少可以让您的 HTML 标记保持整洁。

查看这个有用的线程，它解释了屏幕阅读器与 CSS 隐藏元素的交互。

我还假设在您的 CSS 中的第二个引用中您的意思是--changernot --charger。

附带说明一下，如果语句：.main__header--changer {display: none;}在所有媒体查询中都相同，您应该考虑在任何查询之外只编写一次，这样它就可以普遍适用，而不会在您的代码中重复。

希望这对您有所帮助！

于 2013-02-23T06:32:29.080 回答