Има ли подходящ начин да направите отзивчив текст?

Често съм карал дизайнери да ми дават адаптивен дизайн, при който формулировката на даден елемент се променя в зависимост от размера на екрана.

Настолни компютри: Прочетете повече
Мобилни устройства: Прочетете

Настолен компютър: Изтегляне на PDF
Мобилен компютър: Експортиране

Настолни компютри: Щракнете тук
Мобилни устройства: Докоснете тук

Кой е правилният начин да имате различен текст в мобилните и настолните версии на уебсайт?


person KOVIKO    schedule 09.10.2014    source източник
comment
Можете да използвате JavaScript или да използвате медийни заявки, за да покажете или скриете определени елементи на страницата в зависимост от разделителната способност.   -  person TylerH    schedule 09.10.2014
comment
Няма един правилен начин. Всичко зависи от това с какво трябва да работите.   -  person j08691    schedule 09.10.2014
comment
Можете да използвате помощни програми за стартиране, за да постигнете това, от което се нуждаете, много просто и ясно. Проверете: getbootstrap.com/css/#responsive-utilities   -  person artuc    schedule 09.10.2014
comment
Повечето отзивчиви рамки имат име на клас, което добавяте за X размер. Поставете текст в отделни интервали и добавете този клас.   -  person epascarello    schedule 09.10.2014
comment
проблемът с такива помощни класове е, че те наистина не замъгляват съдържанието от всички екранни четци (някои все още четат елементи с display: none; и visibility: hidden;) - проблем с достъпността   -  person Luca    schedule 09.10.2014


Отговори (2)


Можете да използвате медийни заявки, псевдо класове и известна изобретателност за това:

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="/bg/" data-mobiletext="Read"><span>Read more</span></a>
<a href="/bg/" data-mobiletext="Export"><span>Download PDF</span></a>
<a href="/bg/" data-mobiletext="Tap here"><span>Click here</span></a>

Щракнете върху „Цяла страница“, за да видите версията за настолен компютър.

person Salman A    schedule 09.10.2014
comment
Този подход само за CSS е много чист. Ще ми е интересно да разбера дали има начин да се позволи на ширината да се адаптира автоматично. Като се има предвид, че текстът е зададен в CSS, ръчното задаване на ширина не би трябвало да е голям проблем. Но би било хубаво да не се налага. - person KOVIKO; 09.10.2014
comment
Обвийте текста на връзката в елемент span, така че да е по-лесно да се манипулира чрез CSS. Скоро ще коригирам отговора си. - person Salman A; 09.10.2014
comment
Генерираният от CSS текст не се съобщава от екранните четци, така че с тази техника AT потребителите няма да получат никакъв текст. - person steveax; 09.10.2014
comment
@steveax span съдържа по-дългия текст. Настроил съм го на display: none за демонстрация; Вместо това може да се използват алтернативни техники. - person Salman A; 09.10.2014

Има няколко подхода, които съм използвал, когато клиентите са отправили подобни искания (и не са били убедени*):

1) Използвайте Javascript, за да промените текста въз основа на ширината на екрана / методите за откриване на устройство;

2) Задайте текста по подразбиране като ваш предпочитан избор и го обвийте в span или подобно, използвайте текста, който смятате, че е най-добър на всички устройства (най-добър за SEO/съдържание/екранни четци в зависимост от приоритета), след което използвайте псевдо селектори, напр. :before със свойство content: '' за задаване на алтернативен текст въз основа на медийни заявки. Скриване на обхвата/елемента по подразбиране според случая.

(*) Бих казал, че обмислете съдържанието си и вижте дали можете да намерите универсален етикет за тези елементи, но вероятно е по-добра практика.

person steve    schedule 09.10.2014
comment
Браво за бележката под линия ;) - person Andrew Barber; 09.10.2014
comment
Благодаря - всички сме били там с подобни искания... така че се надяваме първо да сме били полезни :) - person steve; 09.10.2014