有没有合适的方法来制作自适应文本？

Question

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?

Answer 1

There are a couple of approaches I've used where clients have made similar requests (and not been talked out of it*):

1) Use Javascript to change the text based on screen width / device detection methods;

2) Set the default text as your preferred choice, and wrap it in a span or similar, use the text that you think is best on all devices (best for SEO / content / screen readers depending on priority) then use pseudo selectors eg :before with the content: '' property to set alternative text based on media queries. Hiding the default span/element as appropriate.

(*) I would say consider your content and see if you can find a universal label for these items is probably better practice though.

Answer 2

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.