Is there a proper way to make responsive text?

问题

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?

回答1:

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.

回答2:

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 e.g. :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.

来源：https://stackoverflow.com/questions/26279082/is-there-a-proper-way-to-make-responsive-text

标签

javascript

html

css

semantic-markup