Media Queries တွင် Variable များကိုအသုံးပြုခြင်း CSS
Media Queries တွင် Variable များကိုအသုံးပြုခြင်း။
ယခု ကျွန်ုပ်တို့သည် မီဒီယာမေးမြန်းမှုအတွင်းတွင် ပြောင်းလဲနိုင်သောတန်ဖိုးတစ်ခုကို ပြောင်းလဲလိုပါသည်။
အကြံပြုချက်- Media Queries သည် မတူညီသော စက်များအတွက် မတူညီသော ပုံစံစည်းမျဉ်းများ (စခရင်များ၊ တက်ဘလက်များ၊ မိုဘိုင်းလ်ဖုန်းများ စသည်) ကို သတ်မှတ်ခြင်းအကြောင်း ဖြစ်သည်။ ကျွန်ုပ်တို့၏မီဒီယာမေးခွန်းများအခန်း တွင် မီဒီယာမေးခွန်းများကို သင်ပိုမိုလေ့လာနိုင်ပါသည် ။
ဤတွင်၊ ကျွန်ုပ်တို့သည် အတန်းအတွက် --fontsize ဟုခေါ်သော ဒေသန္တရ ကိန်းရှင်အသစ်တစ်ခုကို ပထမဆုံးကြေငြာသည်
.container
။ ကျွန်ုပ်တို့သည် ၎င်း၏တန်ဖိုးကို 25 ပစ်ဇယ်အဖြစ် သတ်မှတ်သည်။ ပြီးရင်
.container
အတန်းထဲမှာ သုံးပါတယ်။ ထို့နောက်
@media
"ဘရောက်ဆာ၏အကျယ်သည် 450px သို့မဟုတ် ပိုကျယ်သောအခါ၊
.container
အတန်း၏ --fontsize variable value ကို 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;
}
}
@media
ဤသည်မှာ စည်းမျဉ်း ရှိ --blue variable ၏တန်ဖိုးကိုလည်း ပြောင်းသည့် အခြားဥပမာတစ်ခုဖြစ်သည် ။
ဥပမာ
/* 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;
}
}
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် လုပ်ဆောင်ချက်ကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်
var()
။
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() လုပ်ဆောင်ချက်
Property | Description |
---|---|
var() | Inserts the value of a CSS variable |