Tasarım Yaklaşımımı Değiştiren CSS Media Query
Eskiden web sitelerini ekran boyutuna bakarak tasarlardım.
Kullanıcının telefon mu yoksa tablet mi kullandığını tespit etmem gerektiğini düşünürdüm. Ekran yüksekliğinin genişlikten daha büyük olup olmadığını kontrol etmeyi denedim. Bu sadece yönlendirmeyi (orientation) kontrol ediyordu; cihaz tipini kontrol etmiyordu.
Daha iyi bir yol buldum. İnsanların sitenizle nasıl etkileşime girdiğini kontrol etmek için media query'leri kullanın.
(hover) sorgusu, bir cihazın öğelerin üzerine gelip gelemediğini (hover) kontrol eder.
Fare veya trackpad kullanan cihazlar için @media (hover: hover) kullanın.
Telefon gibi sadece dokunmatik olan cihazlar için @media (hover: none) kullanın.
Bu, mobildeki hover sorunlarını çözmenize yardımcı olur. Telefonlarda hover kuralları genellikle çalışmaz veya tuhaf davranır. Mobilde butonları gösteren ancak masaüstünde kullanıcı üzerine gelene kadar gizleyen kodlar yazabilirsiniz.
Tailwind, bunu arbitrary variants ile kolaylaştırır:
Ayrıca (pointer) ile işaretçi hassasiyetini de kontrol edebilirsiniz.
• Fare: hover ve hassas işaretçi (fine pointer) • Trackpad: hover ve hassas işaretçi (fine pointer) • Parmak dokunuşu: hover yok ve kaba işaretçi (coarse pointer) • Stylus: genellikle hover ve hassas işaretçi (fine pointer)
Sadece ana cihazı değil de her bir giriş cihazını kontrol etmek isterseniz şunları kullanın:
• @media (any-hover: hover) • @media (any-pointer: fine)
Fare takılı bir tablet, birincil girişi için hover: none raporlayabilir. Ancak bir fare mevcut olduğu için any-hover: hover raporlayacaktır.
Sadece ekran boyutları için tasarlamayı bırakın. Kullanıcıların arayüzünüze nasıl dokunduğuna veya tıkladığına göre tasarlamaya başlayın.