CSS Using Variables in Media Queries

متغیرهای CSS رو میشه داخل Media Queryها هم استفاده کرد.
این یعنی می‌تونی بر اساس سایز صفحه مقدار متغیرها رو تغییر بدی و کل استایل‌ها به‌صورت اتوماتیک تغییر کنن. 🚀

🔹 مثال ۱: تغییر سایز فونت با Media Query

:root { --font-size: 16px; } p { font-size: var(--font-size); } /* وقتی صفحه بزرگ‌تر از 768px باشه */ @media (min-width: 768px) { :root { --font-size: 20px; } } /* وقتی صفحه بزرگ‌تر از 1200px باشه */ @media (min-width: 1200px) { :root { --font-size: 24px; } }

👉 در اینجا:

  • برای موبایل (پیش‌فرض) → 16px

  • برای تبلت (بیشتر از 768px) → 20px

  • برای دسکتاپ بزرگ (بیشتر از 1200px) → 24px

🔹 مثال ۲: تغییر رنگ در Media Query

:root { --bg-color: lightblue; } body { background: var(--bg-color); } @media (prefers-color-scheme: dark) { :root { --bg-color: #222; } }

👉 وقتی کاربر حالت Dark Mode سیستم رو فعال کنه، رنگ پس‌زمینه خودکار تغییر می‌کنه.

🔹 مثال ۳: ریسپانسیو کردن Grid با متغیر

:root { --columns: 1fr; } .grid { display: grid; grid-template-columns: var(--columns); gap: 10px; } @media (min-width: 768px) { :root { --columns: 1fr 1fr; } } @media (min-width: 1200px) { :root { --columns: 1fr 1fr 1fr; } }

👉 اینطوری گرید به‌صورت داینامیک تغییر می‌کنه:

  • موبایل → ۱ ستون

  • تبلت → ۲ ستون

  • دسکتاپ → ۳ ستون

✅ مزیت بزرگ این روش:
به جای تغییر مستقیم استایل عناصر داخل Media Query، کافیه مقدار متغیر تغییر کنه و همه المنت‌هایی که از اون متغیر استفاده می‌کنن خودکار آپدیت می‌شن.