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