Nisbiy birliklar
CSS nisbiy birliklari
Nisbiy birliklar uzunlikni boshqa uzunlik xususiyatiga (masalan, ota element, ildiz element yoki viewport’ga) nisbatan belgilaydi.
Relative length units scale better between different screen sizes.
Maslahat: em va rem birliklari masshtablanuvchi va moslashuvchan saytlar yaratish uchun ideal!
| Unit | Tavsif | |
|---|---|---|
| em | Asosiy elementning shrift o‘lchamiga nisbatan | Try it |
| rem | Ildiz HTML elementining shrift o‘lchamiga nisbatan | Try it |
| vw | Ko‘rish oynasi kengligining 1% ga nisbatan*. 100vw = ko‘rish oynasining to‘liq kengligi | Try it |
| vh | Ko‘rish oynasi balandligining 1% ga nisbatan*. 100vh = ko‘rish oynasining to‘liq balandligi | Try it |
| vmin | Viewport’ning* kichikroq o‘lchamining 1 foiziga nisbatan | Try it |
| vmax | Viewport’ning* kattaroq o‘lchamining 1 foiziga nisbatan | Try it |
| % | Asosiy elementning o‘lchamiga nisbatan | Try it |
| fr | Kasr birlik. 1fr mavjud bo‘sh joyning 1 qismiga teng | Try it |
| ch | "0" (nol) belgisining kengligiga nisbatan | Try it |
* Viewport = brauzer oynasi o‘lchami. 1vw = brauzer viewport’ining joriy kengligining 1%i. Demak, viewport 500px keng bo‘lsa, 1vw 5px bo‘ladi.
Shrift o‘lchamini em bilan belgilash
em birligi ota elementning shrift o‘lchamiga nisbiy. Agar ota elementning shrift o‘lchami 16px bo‘lsa, 2.5em 40px bo‘ladi.
Quyidagi misolda em dagi matn o‘lchami oldingi pikselli misoldagi bilan bir xil. Biroq em birligi foydalanuvchiga brauzer sozlamalarida matn o‘lchamini o‘zgartirish imkonini beradi.
Misol
Shrift o‘lchamlarini em bilan belgilash:
body {
font-size: 16px; /* Base font size */
}
h1 {
font-size: 2.5em; /* 2.5 * 16 = 40px */
}
h2 {
font-size: 1.875em; /* 1.875 * 16 = 30px */
}
p {
font-size: 1em; /* 1 * 16 = 16px */
}
O‘zingiz sinab ko‘ring »
Shrift o‘lchamini rem bilan belgilash
rem birligi ildiz HTML elementining (<html>) shrift o‘lchamiga nisbatan hisoblanadi.
Ota elementning shrift o‘lchamiga nisbiy bo‘lgan em’dan farqli o‘laroq, rem hamesha <html> elementining shrift o‘lchamiga qarab belgilanadi, uning hujjat daraxtidagi joylashuvidan qat’i nazar. Bu rem’ni masshtablanuvchi va moslashuvchan dizaynlar yaratish uchun juda foydali qiladi. <html> elementining shrift o‘lchamini o‘zgartirganda, rem birliklari bilan o‘lcham berilgan barcha elementlar butun sahifa bo‘ylab mutanosib ravishda masshtablanadi.
Ko‘pgina brauzerlarda <html> elementining standart shrift o‘lchami 16px. Demak, standart holatda 1rem 16px ga teng, agar CSS’da aniq o‘zgartirilmagan bo‘lsa.
Misol
Shrift o‘lchamlarini rem bilan belgilash:
html {
font-size: 16px; /* Set the root font size */
}
h1 {
font-size: 2.5rem; /* 2.5 * 16 = 40px */
}
h2 {
font-size: 1.875rem; /* 1.875 * 16 = 30px */
}
p {
font-size: 1rem; /* 1 * 16 = 16px */
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!