关于 javascript：是否有适当的方法来制作响应式文本？


Is there a proper way to make responsive text?

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

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

桌面：下载 PDF
移动：出口

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

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

相关讨论

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

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>

点击"整页"查看桌面版。

相关讨论

在客户提出类似请求的情况下，我使用了几种方法(并且没有被说出来*)：

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

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

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

相关讨论