#3: Что это, кнопки для муравьёв?
Вы когда-нибудь пробовали пользоваться веб-сайтом, предназначенным для настольных компьютеров на вашем телефоне? Сколько попыток вам потребовалось, чтобы открыть меню гамбургеров, прежде чем вы просто сдались? Некоторое время назад мы разработали эти действительно красивые маленькие иконки (акцент на маленькие!) для нашего шаблона протокола https://tailwindcss.com/plus/templates/protocol, и хотя они выглядели великолепно, запускать их без помощи мыши было проблематично. В сегодняшнем видео я расскажу вам о множестве различных решений этой проблемы, в конечном итоге остановившись на том, которое, на мой взгляд, является очень умным и действительно простым в реализации без переделки всего вашего макета. Мы рассмотрим такие вещи, как: Почему просто увеличивать размеры и пытаться компенсировать это, регулируя обивку повсюду, - отстой Использование отрицательных полей, которые хорошо работают, до тех пор, пока они не перестанут работать. Использование абсолютного позиционирования для увеличения размера сенсорного объекта без ущерба для макета Как современные медиа-возможности CSS позволяют нам оптимизировать работу как для мобильных, так и для настольных пользователей одновременно Обязательно получите код + поиграйте с демо-версией на Tailwind Play https://play.tailwindcss.com/CVB96FoJIp, чтобы закрепить свое понимание того, как это работает! #3: Что это, кнопки для муравьёв?: 00:00 Проблема маленьких кнопок на мобильных устройствах • Кнопки с иконками на навигационной панели слишком маленькие для мобильных устройств. • На мобильных устройствах сложно нажать на такие кнопки пальцем. 00:34 Рекомендации по размеру сенсорных элементов • Рекомендуемый размер сенсорных элементов на мобильных устройствах — от 44 пикселей. • Минимальный размер — 48x48 пикселей. 01:47 Нативное решение проблемы • Увеличение размера кнопки до 48x48 пикселей. • Проблема: изменение размера кнопки нарушает макет интерфейса. 03:41 Компенсация изменений макета • Вычитание 12 пикселей с каждой стороны кнопки для компенсации изменения размера. • Уменьшение зазора между кнопкой и логотипом. 05:38 Использование отрицательных полей • Применение отрицательных полей для компенсации увеличенного размера кнопки. • Недостатки: сложности в понимании и поддержке. 07:33 Альтернативное решение без отрицательных полей • Добавление элемента span внутри кнопки для увеличения области нажатия. • Элемент span выравнивается по центру кнопки с помощью flex. 09:47 Проблема состояния наведения на настольных компьютерах • Состояние наведения кнопки срабатывает раньше на настольных компьютерах. • Решение: использование медиа-запросов для определения механизма ввода пользователя. 11:54 Использование медиа-запросов • Применение медиа-запросов для определения использования пальца или мыши. • Создание произвольных вариантов для медиа-запросов в Tailwind CSS. 12:46 Скрытый элемент на устройствах с высокой точностью наведения • Элемент «спен» скрыт на устройствах с высокой точностью наведения. • На маленьком экране состояние наведения не срабатывает до нажатия на кнопку. 13:05 Работа с сенсорными устройствами • На сенсорных устройствах состояние наведения не срабатывает без нажатия. • Можно смоделировать это, используя «понта кор hidden». 13:17 Преимущества решения • Решение работает независимо от размера экрана и типа устройства. • Логика полностью заключена в элементе «спен», ничего не «утекает». • Относительная позиция кнопки относительно элемента «спен» обеспечивает удобство без дополнительных настроек. 14:09 Рекомендация • Автор считает решение прекрасным, особенно в сочетании с медиазапросом. • Рекомендует использовать это решение для улучшения взаимодействия с мобильными устройствами. • Советует проверить свои проекты и добавить это решение для удобства пользователей.
Вы когда-нибудь пробовали пользоваться веб-сайтом, предназначенным для настольных компьютеров на вашем телефоне? Сколько попыток вам потребовалось, чтобы открыть меню гамбургеров, прежде чем вы просто сдались? Некоторое время назад мы разработали эти действительно красивые маленькие иконки (акцент на маленькие!) для нашего шаблона протокола https://tailwindcss.com/plus/templates/protocol, и хотя они выглядели великолепно, запускать их без помощи мыши было проблематично. В сегодняшнем видео я расскажу вам о множестве различных решений этой проблемы, в конечном итоге остановившись на том, которое, на мой взгляд, является очень умным и действительно простым в реализации без переделки всего вашего макета. Мы рассмотрим такие вещи, как: Почему просто увеличивать размеры и пытаться компенсировать это, регулируя обивку повсюду, - отстой Использование отрицательных полей, которые хорошо работают, до тех пор, пока они не перестанут работать. Использование абсолютного позиционирования для увеличения размера сенсорного объекта без ущерба для макета Как современные медиа-возможности CSS позволяют нам оптимизировать работу как для мобильных, так и для настольных пользователей одновременно Обязательно получите код + поиграйте с демо-версией на Tailwind Play https://play.tailwindcss.com/CVB96FoJIp, чтобы закрепить свое понимание того, как это работает! #3: Что это, кнопки для муравьёв?: 00:00 Проблема маленьких кнопок на мобильных устройствах • Кнопки с иконками на навигационной панели слишком маленькие для мобильных устройств. • На мобильных устройствах сложно нажать на такие кнопки пальцем. 00:34 Рекомендации по размеру сенсорных элементов • Рекомендуемый размер сенсорных элементов на мобильных устройствах — от 44 пикселей. • Минимальный размер — 48x48 пикселей. 01:47 Нативное решение проблемы • Увеличение размера кнопки до 48x48 пикселей. • Проблема: изменение размера кнопки нарушает макет интерфейса. 03:41 Компенсация изменений макета • Вычитание 12 пикселей с каждой стороны кнопки для компенсации изменения размера. • Уменьшение зазора между кнопкой и логотипом. 05:38 Использование отрицательных полей • Применение отрицательных полей для компенсации увеличенного размера кнопки. • Недостатки: сложности в понимании и поддержке. 07:33 Альтернативное решение без отрицательных полей • Добавление элемента span внутри кнопки для увеличения области нажатия. • Элемент span выравнивается по центру кнопки с помощью flex. 09:47 Проблема состояния наведения на настольных компьютерах • Состояние наведения кнопки срабатывает раньше на настольных компьютерах. • Решение: использование медиа-запросов для определения механизма ввода пользователя. 11:54 Использование медиа-запросов • Применение медиа-запросов для определения использования пальца или мыши. • Создание произвольных вариантов для медиа-запросов в Tailwind CSS. 12:46 Скрытый элемент на устройствах с высокой точностью наведения • Элемент «спен» скрыт на устройствах с высокой точностью наведения. • На маленьком экране состояние наведения не срабатывает до нажатия на кнопку. 13:05 Работа с сенсорными устройствами • На сенсорных устройствах состояние наведения не срабатывает без нажатия. • Можно смоделировать это, используя «понта кор hidden». 13:17 Преимущества решения • Решение работает независимо от размера экрана и типа устройства. • Логика полностью заключена в элементе «спен», ничего не «утекает». • Относительная позиция кнопки относительно элемента «спен» обеспечивает удобство без дополнительных настроек. 14:09 Рекомендация • Автор считает решение прекрасным, особенно в сочетании с медиазапросом. • Рекомендует использовать это решение для улучшения взаимодействия с мобильными устройствами. • Советует проверить свои проекты и добавить это решение для удобства пользователей.