متغیرها در کوئری های رسانه ای (Variables in Media Queries)
در این راهنما یاد می گیرید چگونه «متغیرها در کوئری های رسانه ای» به شما کمک می کنند تا بر اساس عرض نمایشگر، مقادیر پویا تنظیم کنید. سپس بدون تکرار کد، تایپوگرافی و رنگ بندی را واکنش گرا می سازید.
تعریف متغیر محلی و تغییر آن در @media
ابتدا یک متغیر محلی مانند --fontsize را روی عنصر هدف تعریف کنید. سپس در قانون @media مقدار آن را برای نماهای بزرگ تر بازنویسی کنید.
:root { --primary-bg-color: #1e90ff; --primary-color: #ffffff; } body { background-color: var(--primary-bg-color); } .container { --fontsize: 20px; color: var(--primary-bg-color); background-color: var(--primary-color); padding: 15px; font-size: var(--fontsize); } .container h2 { border-bottom: 2px solid var(--primary-bg-color); } @media screen and (min-width: 450px) { .container { --fontsize: 40px; } }نکته: چون متغیر در همان انتخاب گر تعریف شده است، محدوده آن محلی است و فقط همان بخش را تحت تأثیر قرار می دهد.
بازنویسی متغیرهای سراسری در کوئری های رسانه ای
گاهی می خواهید تم سراسری نیز با اندازه صفحه تغییر کند. در این صورت می توانید متغیر ریشه را داخل همان کوئری بازنویسی کنید.
:root { --primary-bg-color: #1e90ff; --primary-color: #ffffff; } body { background-color: var(--primary-bg-color); } .container { --fontsize: 20px; color: var(--primary-bg-color); background-color: var(--primary-color); padding: 15px; font-size: var(--fontsize); } .container h2 { border-bottom: 2px solid var(--primary-bg-color); } @media screen and (min-width: 450px) { .container { --fontsize: 40px; } :root { --primary-bg-color: lightblue; } }هشدار: اگر متغیر سراسری را در کوئری بازنویسی کنید، تمام اجزایی که از آن استفاده می کنند تغییر خواهند کرد؛ این رفتار را آگاهانه به کار ببرید.
مسیرهای بعدی برای «متغیرها در کوئری های رسانه ای»
برای یادگیری کامل نحو var() به صفحه تابع var() در CSS مراجعه کنید. همچنین نحوه بازنویسی متغیرها و کنترل آن ها با جاوااسکریپت توضیح داده شده است.
- تابع var() در CSS — مرجع مقداردهی و fallback
- بازنویسی متغیرها — محدوده محلی و سراسری