CSS / HTML - Скрыть изображения на мобильном телефоне и использовать альтернативный текст

Question

В настоящее время у меня есть страница, которая генерирует таблицу из базы данных SQL с использованием PHP, включая один столбец, содержащий изображения.Из-за того, что нам теперь приходится работать на мобильной платформе, я ищу способ скрыть изображения.В настоящее время я использую display: none для файла antiscreen.css, но поскольку изображения являются ссылками, он не показывает ссылки

Для ясности, когда изображение находится в браузере ПК, оно выглядит так:

<td>
  <a href="link to image source:>
    <img  height=80 alt='Text I want to display' src="link to image source" />
  </a>
</td>

А когда на мобильном телефоне изображение, ссылка и текст скрыты методом display:none.

Так как бы вы порекомендовали мне это решить?

Answer 1

Я бы, наверное, сделал это:

<td>
  <a href="link to image source:>
    <img  height=80 alt='Text I want to display' src="link to image source" />
    <span class="mobileonly" src="link to image source">Text I want to display</span>
  </a>
</td>

Тогда я бы установил span.mobileonly { display: none; } в основной таблице стилей и span.mobileonly { display: inline; } в antiscreen.css. Преимущество состоит в том, что мобильная ссылка также будет легко стилизована.

Answer 2

Еще одна опция, которая работает для всех размеров экрана под определенным номером. пикселей использует медиа-запрос, в основном аналогичный приведенному выше, но с преимуществом, что он работает на любом размере экрана, меньшем, чем определенное количество пикселей.

    /* Media Query for mobile */

    @media screen and (max-width: 480px) {  

    /* This resizes tables and images to be 100% wide with a proportionate width */

    /* Hide stuff on mobiles */
    table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}

    /* Additional Media Query for tablets */

    @media screen and (min-width: 480px) and (max-width: 1024px) {

    /* Hide stuff on tablets */
    table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}

Это должно охватывать мобильные и планшетные устройства.

Код предоставлен учебником по электронной почте .net. Я снял только те части, которые тебе не нужны.

Использование:

<img class="emailnomob" height=80 alt="Text I want to display" src="link to image source" />