Переключить эффект наведения на ссылку, когда на мобильном устройстве или на маленьком дисплее - PullRequest
Новая
       17

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

1 голос
/ 16 марта 2019

У меня есть веб-сайт, где я использую эффекты при наведении курсора на предметы, чтобы показать больше деталей. На маленьких дисплеях или мобильных устройствах я хотел бы «преобразовать» эффект наведения в ссылку и показать модальную панель с информацией. Я нашел это решение 

<h2>
    <span class="profile-large">Item name</span>
    <a class="profile-small" href="javascript:;">Item name</a>
</h2>

Итак, в css-файле я определяю точку останова, чтобы сделать видимым класс profile-large или profile-small class. Это правильный и правильный подход? Спасибо

Ответы [ 2 ]

2 голосов
/ 16 марта 2019

Вам придется работать с правилами @media.

Я возьму 900 пикселей для максимальной ширины для мобильного устройства и все выше для настольного устройства в моем примере ниже.

CSS 

@media (min-width: 901px) { // desktop-devices
    .profile-small { display: none; }
}

@media (max-width: 900px) { // mobile devices
    .profile-large { display: none; }
}

По сути, вы говорите: скрывайте anchor для больших экранов и скрывайте span для небольших экранов.

1 голос
/ 16 марта 2019

Да,

, это обычный подход.

Посмотрите, как фреймворк начальной загрузки использует этот https://v4 -alpha.getbootstrap.com / layout / respive-utilities /.Также с помощью служебных классов CSS.

Здесь вы можете найти код для этого: https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_responsive-utilities.scss

Конечно, вы можете разработать собственное решение на основе этого.Особенно, если вам не нужны все из них, чтобы сохранить несколько байтов.

...