Есть ли способ сделать отзывчивый текст?

У меня часто есть дизайнеры, которые дают мне отзывчивые проекты, где формулировка элемента изменяется в зависимости от размера экрана.Есть ли способ сделать отзывчивый текст?

Desktop: Подробнее
Mobile: Читать

Desktop: Скачать PDF
Mobile: Экспорт

Desktop: Нажмите здесь
Mobile: Нажмите здесь

Каков правильный способ иметь другой текст в мобильных и настольных версиях веб-сайта?

источник

2014-10-09 Koviko

Вы можете использовать JavaScript или использовать медиа-запросы для отображения или скрытия определенных элементов на странице в зависимости от разрешения. – TylerH

Нет ни одного «правильного пути». Все зависит от того, с чем вам приходится работать. – j08691

Вы можете использовать утилиты bootstrap для быстрого реагирования, чтобы достичь того, что вам нужно очень просто и четко. Проверьте: http://getbootstrap.com/css/#responsive-utilities – artuc

Вы можете использовать медиа-запросы, псевдо-классы и некоторую изобретательность для этого:

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>

Нажмите "Полная страница" для просмотра версии Desktop.

источник

2014-10-09 13:21:11

Этот подход только для CSS очень чист. Мне было бы интересно узнать, есть ли способ позволить автоматически автоматически соответствовать ширине. Учитывая, что текст установлен в CSS, установка ширины вручную не должна быть большой проблемой. Но было бы неплохо не нужно. – Koviko

Оберните текст ссылки внутри элемента span, чтобы его можно было легко манипулировать с помощью CSS. Вскоре я пересмотрю свой ответ. –

Сгенерированный текст CSS не объявляется читателями экрана, поэтому с помощью этой техники пользователи AT не получат никакого текста. – steveax

Там есть несколько подходов, которые я использовал, где клиенты сделали аналогичные запросы (и не отговорили его *):

1) Использование Javascript для изменения текста на основе ширины экрана обнаружения/устройство методы;

2) Установите текст по умолчанию в качестве предпочтительного варианта и оберните его в промежутке или аналогичном, используйте текст, который, по вашему мнению, лучше всего на всех устройствах (лучше всего подходит для SEO/контент/читателей экрана в зависимости от приоритета), затем используйте псевдоселекторы, например : before с содержимым: '' свойство для установки альтернативного текста на основе медиа-запросов. Скрыть по умолчанию диапазон/элемент по умолчанию.

(*) Я бы сказал, что ваш контент и посмотреть, можете ли вы найти универсальный ярлык для этих предметов, вероятно, лучше всего.

источник

2014-10-09 13:05:42 steve

Kudos on footnote;) –

Спасибо - мы все были там с такими запросами ... так, надеюсь, было полезно сначала :) – steve

Есть ли способ сделать отзывчивый текст?

ответ

Смежные вопросы