CSS मीडिया क्वेरी में वेरियेबल
- पिछला पृष्ठ CSS वेरियेबल - JavaScript
- अगला पृष्ठ CSS @property
मीडिया क्वेरी में वेरियेबल का इस्तेमाल
अब, हम मीडिया क्वेरी में वेरियेबल के मूल्य को संशोधित करना चाहते हैं.
सूचना:मीडिया क्वेरी विभिन्न उपकरणों (दृश्य, पैड, मोबाइल आदि) के लिए अलग-अलग स्टाइल नियम निर्धारित करने के लिए है. आप 'मीडिया क्वेरी' चाप्टर में मीडिया क्वेरी के बारे में अधिक जान सकते हैं.
यहाँ, हम सबसे पहले .container वर्ग के लिए एक नई स्थानीय वेरियेबल --fontsize घोषित करते हैं. हम इसका मूल्य 25 पिक्सल रखते हैं. फिर हम .container वर्ग में इसका इस्तेमाल करते हैं. फिर, हम एक @media नियम बनाते हैं, जिसकी सामग्री 'जब ब्राउज़र की चौड़ाई 450px या अधिक हो तो .container वर्ग के --fontsize वेरियेबल का मूल्य 50px कर दें.' है.
यह पूर्ण उदाहरण है:
实例
/* 变量声明 */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* 样式 */
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;
}
}
यह एक और उदाहरण है, जिसमें हमने @media नियम में --blue वेरियेबल के मूल्य को भी बदल दिया है:
实例
/* 变量声明 */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* 样式 */
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() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() फ़ंक्शन
| फ़ंक्शन | वर्णन |
|---|---|
| var() | CSS वेरियेबल के मान को इंसर्ट करें。 |
- पिछला पृष्ठ CSS वेरियेबल - JavaScript
- अगला पृष्ठ CSS @property
