有正确的方法来制作响应文本吗？ [英] Is there a proper way to make responsive text?

问题描述

桌面

>：阅读更多

移动：阅读

桌面：下载PDF

移动：导出

桌面：点击此处

移动：点击此处

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

snippetdata-lang =jsdata-hide =false>

  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>阅读更多< / span>< / a>< a href =/data-mobiletext =Export> ; / a>< a href =/data-mobiletext =点这里>< span>点击这里< / span>< / a>  > 

点击全页以查看桌面版本。

I've oftentimes had designers give me responsive designs where the wording of an element changes based on the size of the screen.

Desktop: Read more
Mobile: Read

Desktop: Download PDF
Mobile: Export

Desktop: Click here
Mobile: Tap here

What is the correct way to have different text in mobile and desktop versions of a website?

解决方案

You could use media queries, pseudo classes and some ingenuity for this:

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>

Click "Full Page" to view Desktop version.

这篇关于有正确的方法来制作响应文本吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！