Media so‘rovlarda o‘zgaruvchilar
CSS o‘zgaruvchilari media so‘rovlarda
Media so‘rovlar (Media Queries) turli qurilmalar (ekranlar, planshetlar, mobil telefonlar va h.k.) uchun turli uslub qoidalarini belgilashga xizmat qiladi. Media so‘rovlar haqida Media Queries bobimizda ko‘proq bilib olishingiz mumkin.
Endi 450px dan kichik ekranlar uchun bitta o‘zgaruvchi qiymati va 450px dan katta ekranlar uchun boshqa o‘zgaruvchi qiymati belgilamoqchimiz.
Bu yerda avval .container klassi uchun --fontsize nomli yangi lokal o‘zgaruvchi e’lon qilamiz. Qiymatini 20 pikselga belgilaymiz. Keyin "Brauzer kengligi 450px yoki undan kattaroq bo‘lganda, .container klassining --fontsize o‘zgaruvchi qiymatini 40px ga o‘zgartiring" deyuvchi @media qoidasini yaratamiz:
Misol
:root {
--primary-bg-color: #1e90ff;
--primary-color:
#ffffff;
}
body {
background-color:
var(--primary-bg-color);
}
.container {
--fontsize: 20px;
color: var(--primary-bg-color);
background-color:
var(--primary-color);
padding: 15px;
font-size:
var(--fontsize);
}
.container h2 {
border-bottom: 2px
solid var(--primary-bg-color);
}
@media screen and (min-width:
450px) {
.container {
--fontsize: 40px;
}
}
O‘zingiz sinab ko‘ring »
Mana @media qoidasida --primary-bg-color o‘zgaruvchisi qiymatini ham o‘zgartiradigan yana bir misol:
Misol
:root {
--primary-bg-color: #1e90ff;
--primary-color:
#ffffff;
}
body {
background-color:
var(--primary-bg-color);
}
.container {
--fontsize: 20px;
color: var(--primary-bg-color);
background-color:
var(--primary-color);
padding: 15px;
font-size:
var(--fontsize);
}
.container h2 {
border-bottom: 2px
solid var(--primary-bg-color);
}
@media screen and (min-width: 450px) {
.container {
--fontsize: 40px;
}
:root {
--primary-bg-color: lightblue;
}
}
O‘zingiz sinab ko‘ring »
CSS var() funksiyasi
| Function | Tavsif |
|---|---|
| var() | CSS o‘zgaruvchisining qiymatini kiritadi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!