xelaok/svelte-media-query
این ابزار به تو امکان می‌دهد تا کوئری‌های CSS media رو به صورت واکنش‌گرا در کامپوننت‌های Svelte استفاده کنی.
با استفاده از این کتابخانه، می‌تونی راحت تشخیص بدی که کاربر از چه دستگاهی (مثلاً موبایل، تبلت یا دسکتاپ) استفاده می‌کنه و رفتار کامپوننت‌ها رو تغییر بدی.
کاربرد:
این کتابخانه برای ساخت رابط‌های کاربری واکنش‌گرا عالیه. مثلاً می‌تونی با استفاده از یک media query تشخیص بدی که آیا صفحه کوچیک‌تر از 768px هست و بر اساس اون یک منوی موبایل رو نمایش بدی.
در چه شرایطی بهتره استفاده شود؟
وقتی داری یک اپلیکیشن Svelte می‌سازی و نیاز داری رفتار کامپوننت‌ها رو بر اساس اندازه صفحه تغییر بدی، این ابزار گزینه مناسبیه.
همچنین اگر می‌خوای از حالت‌های تمیز و قابل تست برای مدیریت ریسپانسیویته استفاده کنی، به جای نوشتن جاوااسکریپت سنگین، این کتابخانه کمک‌کننده‌ست.
چند مثال از موارد استفاده:
- نمایش یا پنهان کردن یک بار ناوبری در موبایل
- تغییر ساختار گرید در تبلت
- بارگذاری تصاویر با اندازه مناسب بر اساس دستگاه
- فعال کردن حالت تمیز (dark mode) بر اساس ترجیح سیستم کاربر (prefers-color-scheme)
- ##responsive
- ##svelte
- ##media
- ##web
- ##reactive
- ##mobile
- ##javascript
- ##frontend
- ##ui
- ##dark