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
