关于 javascript：是否有适当的方法来制作响应式文本？
Is there a proper way to make responsive text?
我经常让设计师给我响应式设计，其中元素的措辞会根据屏幕的大小而变化。
桌面：阅读更多
手机：阅读
桌面：下载 PDF
移动：出口
桌面：点击这里
手机：点击此处
在移动版和桌面版网站中使用不同文本的正确方法是什么？
相关讨论
- 您可以使用 JavaScript，也可以使用媒体查询根据分辨率显示或隐藏页面上的某些元素。
- 没有一种"正确的方法"。这一切都取决于你必须使用什么。
- 您可以使用引导响应实用程序来非常简单明了地实现您的需求。检查：getbootstrap.com/css/#responsive-utilities
- 大多数响应式框架都有一个您为 X 大小添加的类名。将文本放在单独的跨度中并添加该类。
- 此类实用程序类的问题在于它们并没有真正混淆所有屏幕阅读器的内容(有些仍然使用 display: none; 和 visibility: hidden; 读取元素) - 可访问性问题
您可以为此使用媒体查询、伪类和一些独创性：
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 |
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); } } |
|
1
2 3 |
<span>Read more</span>
<span>Download PDF</span> <span>Click here</span> |
点击"整页"查看桌面版。
相关讨论
- 这种仅使用 CSS 的方法非常干净。我很想知道是否有办法让宽度自动符合自己。考虑到文本是在 CSS 中设置的，手动设置宽度应该不是什么大问题。但最好不需要。
- 将链接文本包裹在 span 元素中，以便更容易通过 CSS 进行操作。我会尽快修改我的答案。
- 屏幕阅读器不会宣布 CSS 生成的文本，因此使用这种技术 AT 用户将根本看不到任何文本。
- @steveax 跨度包含较长的文本。我已将其设置为 display: none 以进行演示；可以使用替代技术。
在客户提出类似请求的情况下，我使用了几种方法(并且没有被说出来*)：
1) 使用Javascript根据屏幕宽度/设备检测方法更改文本；
2) 将默认文本设置为您的首选，并将其包裹在一个跨度或类似的范围内，使用您认为在所有设备上最好的文本(最适合 SEO/内容/屏幕阅读器，具体取决于优先级)，然后使用伪选择器，例如:before 与 content: \'\' 属性设置基于媒体查询的替代文本。根据需要隐藏默认跨度/元素。
(*) 我会说考虑你的内容，看看你是否能为这些项目找到一个通用标签，不过这可能是更好的做法。
相关讨论
- 脚注上的荣誉;)
- 谢谢-我们都收到过这类请求……所以希望首先会有所帮助:)