Javascript 有没有合适的方法来制作响应性文本？

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

桌面：阅读更多 手机：阅读

桌面：下载PDF 手机：出口

桌面：点击这里 手机：点击这里

---

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

我使用了几种方法，客户提出了类似的请求，但没有被拒绝*：

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

2将默认文本设置为您的首选文本，并将其包装成span或类似文本，根据优先级在所有设备上使用您认为最适合SEO/内容/屏幕阅读器的文本，然后使用伪选择器，例如：before和content:属性，根据媒体查询设置备选文本。根据需要隐藏默认范围/元素

---

<>我想说一下你的内容，看看你是否能为这些项目找到一个通用的标签，也许是更好的做法。 我使用了几种方法，客户提出了类似的请求，但没有被说服放弃*：

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

2将默认文本设置为您的首选文本，并将其包装成span或类似文本，根据优先级在所有设备上使用您认为最适合SEO/内容/屏幕阅读器的文本，然后使用伪选择器，例如：before和content:属性，根据媒体查询设置备选文本。根据需要隐藏默认范围/元素

---

<>我想说一下你的内容，看看你是否能为这些项目找到一个通用的标签，也许是更好的做法。 您可以使用媒体查询、伪类和一些独创性：

a[数据移动文本]{ 背景色：FC0； } @媒体屏幕和最大宽度：700px{ a[数据移动文本]{ 背景色：CF0； } [data mobiletext]跨度{ 显示：无； } a[数据移动文本]：在{ 内容：attrdata mobiletext； } }

---

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

a[数据移动文本]{ 背景色：FC0； } @媒体屏幕和最大宽度：700px{ a[数据移动文本]{ 背景色：CF0； } [data mobiletext]跨度{ 显示：无； } a[数据移动文本]：在{ 内容：attrdata mobiletext； } }

---

---

您可以使用JavaScript，也可以使用媒体查询根据分辨率显示或隐藏页面上的某些元素。没有一种正确的方法。这一切都取决于你必须使用什么。你可以使用引导响应实用程序来实现你所需要的非常简单和明确。检查：大多数响应性框架都有一个您为X大小添加的类名。将文本放在单独的跨距中，并添加该类。此类实用程序类的问题在于，它们不会真正混淆所有屏幕阅读器的内容。有些仍然使用display读取元素：none；和可见性：隐藏；-可访问性问题您可以使用JavaScript，也可以根据分辨率使用媒体查询显示或隐藏页面上的某些元素。没有一种正确的方法。这一切都取决于你必须使用什么。你可以使用引导响应实用程序来实现你所需要的非常简单和明确。检查：大多数响应性框架都有一个您为X大小添加的类名。将文本放在单独的跨距中，并添加该类。此类实用程序类的问题在于，它们不会真正混淆所有屏幕阅读器的内容。有些仍然使用display读取元素：none；和可见性：隐藏；-脚注上的可访问性问题库；谢谢-我们都有这样的要求。。。所以希望首先是有帮助的：脚注上的荣誉；谢谢-我们都有这样的要求。。。所以希望首先是有帮助的：这种只使用CSS的方法非常干净。我很想知道是否有一种方法可以让宽度自动符合自身。考虑到文本是在CSS中设置的，手动设置宽度应该不是什么大问题。但最好不要这样做。将链接文本包装在span元素中，以便更容易通过CSS进行操作。我将很快修改我的答案。屏幕阅读器不会公布CSS生成的文本，因此使用此技术，用户将不会得到任何文本。@steveax跨度包含更长的文本。我已将其设置为显示：无用于演示；可以使用。这种只使用CSS的方法非常干净。我很想知道是否有一种方法可以让宽度自动符合自身。考虑到文本是在CSS中设置的，手动设置宽度应该不是什么大问题。但最好不要这样做。将链接文本包装在span元素中，以便更容易通过CSS进行操作。我会修改我的答案

---

wer SHORT.CSS生成的文本不会由屏幕阅读器公布，因此使用此技术，用户将不会获得任何文本。@steveax跨度包含较长的文本。我已将其设置为显示：无用于演示；可以用它来代替。