Question

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

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

桌面：下载PDF
移动：导出

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

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

Answer 1

我已经使用了几种方法，客户提出了类似的请求（并没有被人们讨论过）*：

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

2）将默认文本设置为首选项，并将其包装在一个范围或类似内容中，使用您认为最适合所有设备的文本（最适合SEO /内容/屏幕阅读器，具体取决于优先级）然后使用伪选择器例如：之前的内容：＆＃39;＆＃39;用于根据媒体查询设置备用文本的属性。隐藏适当的默认范围/元素。

（*）我会考虑你的内容，看看你是否可以找到这些项目的通用标签可能是更好的做法。

Answer 2

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

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>

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

是否有适当的方式来制作响应式文本？

2 个答案: