有没有合适的方法来制作响应式文本？答案

【问题标题】：Is there a proper way to make responsive text?有没有合适的方法来制作响应式文本？
【发布时间】：2014-10-09 13:00:31
【问题描述】：

我经常让设计师给我响应式设计，其中元素的措辞会根据屏幕的大小而变化。

桌面：阅读更多
移动：阅读

桌面：下载 PDF
移动：导出

桌面：点击此处
移动：点击此处

在移动版和桌面版网站中使用不同文本的正确方法是什么？

【问题讨论】：

您可以使用 JavaScript，也可以使用媒体查询根据分辨率显示或隐藏页面上的某些元素。
没有一种“正确的方法”。这一切都取决于你必须使用什么。
您可以使用引导响应实用程序非常简单明了地实现您的需求。检查：getbootstrap.com/css/#responsive-utilities
大多数响应式框架都有一个您为 X 大小添加的类名。将文本放在单独的 span 中并添加该类。
此类实用程序类的问题在于它们并没有真正混淆来自所有屏幕阅读器的内容（有些仍然使用display: none; 和visibility: hidden; 读取元素） - 可访问性问题

标签： javascript html css semantic-markup

【解决方案1】：

您可以为此使用媒体查询、伪类和一些独创性：

a[data-mobiletext] {
    background-color: #FC0;
}
@media screen and (max-width: 700px) {
    a[data-mobiletext] {
        background-color: #CF0;
    }
    a[data-mobiletext] span {
        display: none;
    }
    a[data-mobiletext]:after {
        content: attr(data-mobiletext);
    }
}

<a href="/" data-mobiletext="Read"><span>Read more</span></a>
<a href="/" data-mobiletext="Export"><span>Download PDF</span></a>
<a href="/" data-mobiletext="Tap here"><span>Click here</span></a>

点击“整页”查看桌面版。

【讨论】：

这种仅使用 CSS 的方法非常简洁。我很想知道是否有办法让宽度自动符合自己。考虑到文本是在 CSS 中设置的，手动设置宽度应该不是什么大问题。但最好不需要。
将链接文本包裹在 span 元素中，以便更容易通过 CSS 进行操作。我会尽快修改我的答案。
CSS 生成的文本不会被屏幕阅读器读出，因此使用这种技术 AT 用户将根本看不到任何文本。
@steveax 跨度包含较长的文本。我已将其设置为display: none 以进行演示；可以改用alternate techniques。

【解决方案2】：

在客户提出类似请求的情况下，我使用了几种方法（并且没有被拒绝*）：

1) 使用Javascript根据屏幕宽度/设备检测方法更改文本；

2) 将默认文本设置为您的首选，并将其包裹在一个跨度或类似的范围内，使用您认为在所有设备上最好的文本（最适合 SEO/内容/屏幕阅读器，具体取决于优先级），然后使用伪选择器，例如:before 使用 content: '' 属性来设置基于媒体查询的替代文本。根据需要隐藏默认跨度/元素。

(*) 我会说考虑您的内容，看看您是否可以为这些项目找到一个通用标签，不过这可能是更好的做法。

【讨论】：

感谢脚注 ;)
谢谢 - 我们都曾收到过此类请求...希望对您有所帮助 :)