有没有适当的方法来做出响应文字？

我经常让设计师给我响应式设计，其中元素的措辞基于屏幕的大小而改变。有没有适当的方法来做出响应文字？

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

桌面：下载PDF
移动：出口

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

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

来源

2014-10-09 Koviko

您可以使用JavaScript，也可以使用媒体查询根据分辨率显示或隐藏页面上的某些元素。 – TylerH 2014-10-09 13:02:48

没有人“正确的方式”。这一切都取决于你必须与之合作。 – j08691 2014-10-09 13:03:45

您可以使用引导响应实用程序来非常简单明了地实现您所需要的功能。检查：http://getbootstrap.com/css/#responsive-utilities – artuc 2014-10-09 13:04:39

你可以使用媒体查询，伪类和一些别出心裁此：

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>

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

来源

2014-10-09 13:21:11

这种纯CSS的方法非常干净。我很想知道是否有办法让宽度自动符合自己。考虑到文本是在CSS中设置的，手动设置宽度不应该是一个大问题。但不需要的话就好了。 – Koviko 2014-10-09 13:29:19

将链接文本包裹在span元素中，以便通过CSS进行操作更加轻松。我马上修改我的答案。 – 2014-10-09 13:43:44

CSS生成的文本不会被屏幕阅读器发布，所以使用这种技术，AT用户根本就没有任何文本。 – steveax 2014-10-09 14:45:38

有一对夫妇的我用过，在这里客户也提出了类似的请求方法（而不是被谈论出来的*）：

1）使用JavaScript根据屏幕宽度来改变文字/设备检测方法;

2）将默认文本设置为您的首选项，并将其包装成一个范围或类似文本，使用您认为所有设备上最好的文本（最好根据优先级选择SEO /内容/屏幕阅读器），然后使用伪选择器例如：之前的内容：''属性根据媒体查询设置替代文字。根据需要隐藏默认的跨度/元素。

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

来源

2014-10-09 13:05:42 steve

脚注上的荣誉;） – 2014-10-09 13:08:19

谢谢 - 我们都在那里提供这些请求......所以希望能有所帮助:) – steve 2014-10-09 13:12:59

有没有适当的方法来做出响应文字？

回答

相关问题