CSS-медіазапит, який змінив мій підхід до дизайну
Раніше я проєктував вебсайти, орієнтуючись на розмір екрана.
Я думав, що мені потрібно визначати, чи використовує користувач телефон чи планшет. Я намагався перевіряти, чи висота екрана більша за ширину. Це дозволяло перевірити лише орієнтацію. Це не дозволяло визначити тип пристрою.
Я знайшов кращий спосіб. Використовуйте медіазапити, щоб перевірити, як люди взаємодіють із вашим сайтом.
Запит (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, оскільки мишка підключена.
Припиніть проєктувати лише під розміри екрана. Почніть проєктувати з урахуванням того, як користувачі торкаються або клікають на ваш інтерфейс.