CSS Using Variables in Media Queries
متغیرهای CSS رو میشه داخل Media Queryها هم استفاده کرد.
این یعنی میتونی بر اساس سایز صفحه مقدار متغیرها رو تغییر بدی و کل استایلها بهصورت اتوماتیک تغییر کنن. 🚀
🔹 مثال ۱: تغییر سایز فونت با Media Query
👉 در اینجا:
-
برای موبایل (پیشفرض) → 16px
-
برای تبلت (بیشتر از 768px) → 20px
-
برای دسکتاپ بزرگ (بیشتر از 1200px) → 24px
🔹 مثال ۲: تغییر رنگ در Media Query
👉 وقتی کاربر حالت Dark Mode سیستم رو فعال کنه، رنگ پسزمینه خودکار تغییر میکنه.
🔹 مثال ۳: ریسپانسیو کردن Grid با متغیر
👉 اینطوری گرید بهصورت داینامیک تغییر میکنه:
-
موبایل → ۱ ستون
-
تبلت → ۲ ستون
-
دسکتاپ → ۳ ستون
✅ مزیت بزرگ این روش:
به جای تغییر مستقیم استایل عناصر داخل Media Query، کافیه مقدار متغیر تغییر کنه و همه المنتهایی که از اون متغیر استفاده میکنن خودکار آپدیت میشن.