CSS Media Query, который изменил мой подход к дизайну
Раньше я проектировал сайты, ориентируясь на размер экрана.
Я думал, что мне нужно определять, использует ли пользователь телефон или планшет. Я пробовал проверять, больше ли высота экрана, чем ширина. Но это позволяло проверить только ориентацию, а не тип устройства.
Я нашел способ лучше. Используйте медиа-запросы, чтобы проверить, как люди взаимодействуют с вашим сайтом.
Запрос (hover) проверяет, может ли устройство наводить курсор на элементы.
Используйте @media (hover: hover) для устройств с мышью или трекпадом.
Используйте @media (hover: none) для устройств только с сенсорным управлением, таких как телефоны.
Это помогает решить проблемы с эффектами наведения на мобильных устройствах. На телефонах правила hover часто не срабатывают или ведут себя странно. Вы можете написать код так, чтобы кнопки отображались на мобильных устройствах, но скрывались на десктопах до тех пор, пока пользователь не наведет на них курсор.
Tailwind упрощает это с помощью произвольных вариантов (arbitrary variants):
Вы также можете проверить точность указателя с помощью (pointer).
• Мышь: hover и точный указатель (fine pointer) • Трекпад: hover и точный указатель (fine pointer) • Сенсорный ввод: отсутствие hover и грубый указатель (coarse pointer) • Стилус: обычно hover и точный указатель (fine pointer)
Если вы хотите проверить каждое устройство ввода, а не только основное, используйте эти запросы:
• @media (any-hover: hover) • @media (any-pointer: fine)
Планшет с подключенной мышью может сообщать hover: none для своего основного способа ввода. Но он сообщит any-hover: hover, так как мышь подключена.
Перестаньте проектировать только под размеры экранов. Начните проектировать с учетом того, как пользователи касаются или кликают по вашему интерфейсу.