मीडिया प्रश्नों में चर का उपयोग कर सीएसएस
मीडिया प्रश्नों में चर का उपयोग करना
अब हम मीडिया क्वेरी के अंदर एक वैरिएबल वैल्यू बदलना चाहते हैं।
युक्ति: मीडिया क्वेरी विभिन्न उपकरणों (स्क्रीन, टैबलेट, मोबाइल फोन, आदि) के लिए अलग-अलग शैली के नियमों को परिभाषित करने के बारे में हैं। आप हमारे मीडिया प्रश्न अध्याय में और अधिक मीडिया प्रश्न जान सकते हैं ।
यहां, हम सबसे पहले कक्षा के लिए --fontsize नामक एक नया स्थानीय चर घोषित करते हैं
.container। हमने इसका मान 25 पिक्सेल पर सेट किया है। फिर हम इसे
.containerकक्षा में और नीचे प्रयोग करते हैं। फिर, हम एक
@mediaनियम बनाते हैं जो कहता है कि "जब ब्राउज़र की चौड़ाई 450px या उससे अधिक हो, तो वर्ग के --fontsize चर मान
.containerको 50px में बदलें।"
यहाँ पूरा उदाहरण है:
उदाहरण
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Styles */
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container
{
color: var(--blue);
background-color: var(--white);
padding: 15px;
font-size: var(--fontsize);
}
@media screen and (min-width:
450px) {
.container {
--fontsize: 50px;
}
}
यहां एक और उदाहरण दिया गया है जहां हम नियम में --blue चर के मान को भी बदलते हैं @media:
उदाहरण
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Styles */
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container
{
color: var(--blue);
background-color: var(--white);
padding: 15px;
font-size: var(--fontsize);
}
@media screen and (min-width:
450px) {
.container {
--fontsize: 50px;
}
:root {
--blue: lightblue;
}
}
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो
var()फ़ंक्शन का पूर्ण समर्थन करता है।
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
सीएसएस वर () समारोह
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |