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: //’//’ 属性设置基于媒体查询的替代文本。根据需要隐藏默认跨度/元素。
(*) 我会说考虑你的内容，看看你是否能为这些项目找到一个通用标签，不过这可能是更好的做法。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/269187.html