Question

这是这个问题的第二次尝试，因为我上次问过这个问题，所以希望这次我会更有意义。

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

 <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'。

我这样做的唯一方法就是屏幕阅读器因为display：none而不会读取标题。有没有不同的方法隐藏标题但不是屏幕阅读器，但内容是从CSS显示的？

由于

Answer 1

您可以使用边距或文本缩进属性在屏幕显示区域外面突出显示内容，从而创建隐藏效果。这些方法并不是我所说的100％干净，但它们至少可以保持HTML标记的整洁。

查看此helpful thread，解释屏幕阅读器与CSS隐藏元素的互动。

我还假设您在CSS的第二个引用中表示--changer而不是--charger。

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

希望这有帮助！

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

1 个答案: