W3.CSS moslashuvchan dizayn
Moslashuvchan veb-dizayn
Moslashuvchan veb-dizayn veb-sahifalarning barcha qurilmalarda chiroyli ko‘rinishini ta’minlaydi.
Kompyuter
Planshet
Telefon
Moslashuvchan veb-dizayn — sahifa har qanday ekran o‘lchamida chiroyli ko‘rinishi uchun CSS va HTML yordamida veb-kontentning o‘lchamini o‘zgartirish, uni yashirish, kichraytirish, kattalashtirish yoki boshqa joyga ko‘chirishdir.
Veb-sahifalarni ko‘plab turli qurilmalarda ko‘rish mumkin: kompyuterlar, planshetlar va telefonlar. Qurilma o‘lchamidan qat’i nazar, veb-sahifangiz chiroyli ko‘rinishi va undan foydalanish qulay bo‘lishi kerak.
W3.CSS kichik, o‘rta va katta ekranlar uchun moslashuvchan maketlar yaratishga mo‘ljallangan klasslarni o‘z ichiga oladi.
W3.CSS moslashuvchanlik klasslari
| Klass | Tavsif |
|---|---|
| w3-content | Markazlashtirilgan, qat’iy o‘lchamli kontent uchun konteyner |
| w3-auto | Markazlashtirilgan, moslashuvchan o‘lchamli kontent uchun konteyner |
| w3-hide-small | Kichik ekranlarda (601px dan kichik) kontentni yashiradi |
| w3-hide-medium | O‘rta ekranlarda kontentni yashiradi |
| w3-hide-large | Katta ekranlarda (992px dan katta) kontentni yashiradi |
| w3-image | Rasmni moslashuvchan qiladi |
| w3-mobile | Mobil qurilmalarda elementlarni blok elementlar sifatida ko‘rsatadi |
Sahifaning moslashuvchan kengligi
Sahifaning moslashuvchan kengligi — veb-sahifa (va uning ichidagi elementlar) kengligi har qanday ekran o‘lchami yoki qurilmaga mos kelishi uchun avtomatik ravishda moslashadigan, masshtablanadigan va qayta joylashadigan veb-maket texnikasi.
W3.CSS veb-sahifani qat’iy kenglikda (masalan, width: 1200px) “muzlatib” qo‘yish o‘rniga egiluvchan (fluid) maketlardan foydalanadi, shu bois sahifa kichik mobil telefondan tortib keng kompyuter monitorigacha barcha qurilmalarda ajoyib ko‘rinadi.
w3-auto klassi
w3-auto
w3-auto klassi markazlashtirilgan, moslashuvchan o‘lchamli kontent uchun konteynerni belgilaydi.
U katta ekranlarda 95% kenglikka, 1205px dan keng ekranlarda esa 1140px qat’iy kenglikka ega bo‘ladi.
O‘rta va kichik ekranlarda max-width qiymati 100% ga o‘zgaradi.
Effektni ko‘rish uchun brauzer oynasining o‘lchamini o‘zgartiring.
w3-content klassi
w3-content
w3-content klassi maksimal kenglikka ega markazlashtirilgan sahifa yaratadi.
Standart kenglikni (980px) o‘zgartirish uchun CSS’ning max-width xususiyatidan foydalaning.
Kichikroq ekranlarda kontent mavjud kenglikka avtomatik ravishda moslashadi.
Effektni ko‘rish uchun oyna o‘lchamini o‘zgartiring.
W3.CSS 2026
Misollar
<div class="w3-auto">
<h2>My Page</h2>
</div>
O‘zingiz sinab ko‘ring »
<div class="w3-content">
<h2>My Page</h2>
</div>
O‘zingiz sinab ko‘ring »
w3-mobile klassi
w3-mobile klassi istalgan elementga mobile-first (avvalo mobil qurilmalar uchun) moslashuvchanlik qo‘shadi.
Kengligi 600px dan kichik ekranlarda u elementni width:100% bilan blok element sifatida ko‘rsatadi.
London
Paris
Tokyo
Misol
<div class="w3-cell-row">
<div class="w3-cell w3-mobile">London</div>
<div class="w3-cell w3-mobile">Paris</div>
<div class="w3-cell w3-mobile">Tokyo</div>
</div>
O‘zingiz sinab ko‘ring »
Moslashuvchan ko‘rinuvchanlik
W3.CSS turli ekran o‘lchamlarida kontentni ko‘rsatish va yashirish uchun klasslarni taqdim etadi.
| Klass | Tavsif |
|---|---|
w3-hide-small |
Kichik ekranlarda kontentni yashiradi |
w3-hide-medium |
O‘rta ekranlarda kontentni yashiradi |
w3-hide-large |
Katta ekranlarda kontentni yashiradi |
Misol
<p class="w3-hide-small">
This paragraph is hidden on small screens.
</p>
O‘zingiz sinab ko‘ring »
Moslashuvchan rasmlar
w3-image klassi rasmlarni moslashuvchan qiladi.
Zarur bo‘lganda rasm o‘z konteyneriga sig‘ishi uchun kichrayadi.
Moslashuvchan maket variantlari
W3.CSS moslashuvchan maketlar yaratishning bir necha usulini taqdim etadi.
| Maket | Eng mos holatlar |
|---|---|
| CSS Grid | Egiluvchan, ikki o‘lchamli va avtomatik moslashuvchan maketlar. |
| Flexbox | Egiluvchan, bir o‘lchamli maketlar va tekislash. |
| Qatorlar (rows) | Oddiy moslashuvchan yarimlar, uchdan birlar va choraklar. |
| Katakchalar (cells) | Oddiy, jadvalsimon ustunli maketlar yaratish uchun. |
| 12 ustunli to‘r | Kichik, o‘rta va katta ekranlar uchun turli ustun kengliklari. |
w3-mobile |
Yonma-yon turgan ustunlarni kichik ekranlarda vertikal ravishda ustma-ust joylashtirish. |
Har bir sahifa uchun eng yaxshi bo‘lgan yagona maket usuli yo‘q.
Maketni tushunish va qo‘llab-quvvatlashni eng osonlashtiradigan usulni tanlang.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!