CSS Viewport Birliklarini O'zlashtirish: Responsiv Dizayn Uchun To'liq Qo'llanma

Doimiy rivojlanib borayotgan veb-dasturlash dunyosida turli ekran o'lchamlariga muammosiz moslashadigan responsiv dizaynlarni yaratish juda muhimdir. CSS Viewport Birliklari (vw, vh, vmin, vmax, vi, va vb) elementlarning o'lchamlarini viewportga nisbatan o'lchash uchun moslashuvchan va masshtablanuvchi yondashuvni taqdim etib, bunga erishishning kuchli usulini taklif qiladi. Ushbu to'liq qo'llanma viewport birliklarining nozikliklarini chuqur o'rganib chiqadi, ularning funksionalligi, amaliy qo'llanilishi va joriy etish uchun eng yaxshi amaliyotlarni ko'rib chiqadi.

Viewport Birliklarini Tushunish

Viewport birliklari brauzerning ko'rish sohasining (viewport) o'lchamiga asoslangan CSS nisbiy uzunlik birliklaridir. Ekran o'lchamidan qat'iy nazar doimiy bo'lib qoladigan piksellar (px) kabi qat'iy birliklardan farqli o'laroq, viewport birliklari o'z qiymatlarini viewport o'lchamlariga qarab dinamik ravishda o'zgartiradi. Ushbu moslashuvchanlik ularni smartfonlardan tortib katta ish stoli monitorlarigacha bo'lgan har qanday qurilmada ajoyib ko'rinadigan moslashuvchan va responsiv maketlarni yaratish uchun ideal qiladi. Asosiy afzallik shundaki, viewport birliklari bilan yaratilgan dizaynlar uyg'un ravishda masshtablanadi, turli ekran o'lchamlarida mutanosiblikni va vizual jozibadorlikni saqlab qoladi.

Asosiy Viewport Birliklari: vw, vh, vmin, vmax

• vw (Viewport Kengligi): Viewport kengligining 1%ini ifodalaydi. Masalan, 10vw viewport kengligining 10%iga teng.
• vh (Viewport Balandligi): Viewport balandligining 1%ini ifodalaydi. Shunga o'xshash, 50vh viewport balandligining 50%iga teng.
• vmin (Viewport Minimum): vw va vh orasidagi kichikroq qiymatni ifodalaydi. Agar viewport balandligidan kengroq bo'lsa, vmin vhga teng bo'ladi. Aksincha, agar viewport kengligidan balandroq bo'lsa, vmin vwga teng bo'ladi. Bu, ayniqsa, kvadrat yoki kvadratga yaqin elementlarda mutanosiblikni saqlash uchun foydalidir.
• vmax (Viewport Maksimum): vw va vh orasidagi kattaroq qiymatni ifodalaydi. Agar viewport balandligidan kengroq bo'lsa, vmax vwga teng bo'ladi. Agar viewport kengligidan balandroq bo'lsa, vmax vhga teng bo'ladi. Bu ko'pincha elementning viewportning eng katta o'lchamini to'ldirishini xohlaganingizda ishlatiladi.

Mantiqiy Viewport Birliklari: vi, vb

Yangi mantiqiy viewport birliklari, vi va vb, mos ravishda viewportning *inline* va *block* o'lchamlariga nisbiydir. Ushbu birliklar hujjatning yozuv rejimi va matn yo'nalishiga sezgir bo'lib, ularni xalqarolashtirilgan veb-saytlar uchun ayniqsa foydali qiladi. Bu turli yozuv tizimlariga moslashuvchan maketlarni yaratishga imkon beradi.

• vi (Viewport Inline): Viewportning inline o'lchamining 1%ini ifodalaydi, bu kontentning gorizontal oqim yo'nalishidir (masalan, ko'pchilik G'arb tillarida chapdan o'ngga). Chapdan o'ngga yozuv rejimida vi vwga o'xshash ishlaydi. Biroq, o'ngdan chapga yozuv rejimida (masalan, arab yoki ibroniy tillarida) vi hali ham gorizontal o'lchamni ifodalaydi, lekin viewportning o'ng chetidan boshlanadi.
• vb (Viewport Block): Viewportning blok o'lchamining 1%ini ifodalaydi, bu kontentning vertikal oqim yo'nalishidir. Bu ko'pchilik keng tarqalgan yozuv rejimlarida vhga o'xshaydi.

Misol: Keling, ham ingliz (chapdan o'ngga), ham arab (o'ngdan chapga) tillari uchun mo'ljallangan veb-saytni ko'rib chiqaylik. Konteynerning yon tomonlaridagi padding yoki margin uchun vidan foydalanish foydalanuvchining til tanlovidan qat'iy nazar izchil oraliqni ta'minlab, til yo'nalishiga qarab avtomatik ravishda to'g'ri tomonga moslashadi.

Viewport Birliklarining Amaliy Qo'llanilishi

Viewport birliklari responsiv va vizual jozibador veb-maketlarni yaratish uchun turli xil stsenariylarda ishlatilishi mumkin. Mana bir nechta keng tarqalgan foydalanish holatlari:

1. To'liq Balandlikdagi Bo'limlar

Butun viewportni qamrab oladigan to'liq balandlikdagi bo'limlarni yaratish keng tarqalgan dizayn usulidir. Viewport birliklari buni juda osonlashtiradi:

            .full-height-section {
 height: 100vh;
 width: 100vw; /* To'liq kenglikni ham to'ldirishini ta'minlaydi */
}

            

              
                Copy
              
            
          

Ushbu kod parchasi .full-height-section elementining ekran o'lchamidan qat'iy nazar har doim butun viewport balandligini egallashini ta'minlaydi. width: 100vw; esa elementning to'liq kenglikni ham to'ldirishini ta'minlab, chinakam to'liq viewportli bo'lim yaratadi.

2. Responsiv Tipografiya

Viewport birliklari viewport o'lchamiga mutanosib ravishda masshtablanadigan responsiv tipografiyani yaratish uchun ishlatilishi mumkin. Bu matnning barcha qurilmalarda o'qilishi oson va vizual jozibador bo'lib qolishini ta'minlaydi.

            h1 {
 font-size: 8vw; /* Shrift o'lchami viewport kengligi bilan masshtablanadi */
}

p {
 font-size: 2vh; /* Shrift o'lchami viewport balandligi bilan masshtablanadi */
}

            

              
                Copy
              
            
          

Ushbu misolda h1 elementining font-size xususiyati 8vwga o'rnatilgan, ya'ni u viewport kengligining 8%iga teng bo'ladi. Viewport kengligi o'zgarganda, shrift o'lchami ham shunga mos ravishda o'zgaradi. Xuddi shunday, p elementining font-size xususiyati 2vhga o'rnatilgan bo'lib, viewport balandligi bilan masshtablanadi.

3. Tomonlar Nisbati Qutilari

Tasvirlar va videolar uchun tomonlar nisbatini saqlash qiyin bo'lishi mumkin, ammo viewport birliklari padding-top hiylasi bilan birgalikda oddiy yechimni taqdim etadi:

            .aspect-ratio-box {
 width: 100%;
 position: relative;
}

.aspect-ratio-box::before {
 content: "";
 display: block;
 padding-top: 56.25%; /* 16:9 tomonlar nisbati (balandlik/kenglik * 100) */
}

.aspect-ratio-box > * {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

            

              
                Copy
              
            
          

Bu usulda kerakli tomonlar nisbatiga (bu holda 16:9) asoslanib hisoblangan padding-top qiymatiga ega psevdo-element (::before) ishlatiladi. Keyin .aspect-ratio-box ichidagi tarkib mavjud bo'shliqni to'ldirish uchun mutlaq joylashtiriladi, bu esa ekran o'lchamidan qat'i nazar tomonlar nisbatini saqlaydi. Bu o'z nisbatlarini saqlashi kerak bo'lgan videolar yoki tasvirlarni joylashtirish uchun juda foydalidir.

4. Moslashuvchan Grid Maketlarini Yaratish

Viewport birliklari ustunlar va qatorlar viewport o'lchamiga mutanosib ravishda sozlanadigan moslashuvchan grid maketlarini yaratish uchun ishlatilishi mumkin. Bu, ayniqsa, boshqaruv panellari va boshqa murakkab maketlarni yaratish uchun foydali bo'lishi mumkin.

            .grid-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); /* Har bir ustun kamida viewport kengligining 20%iga teng */
 grid-gap: 1vw;
}

.grid-item {
 padding: 1vw;
 background-color: #f0f0f0;
}

            

              
                Copy
              
            
          

Bu yerda grid-template-columns xususiyati har bir ustunning kamida viewport kengligining 20%iga teng bo'lishini, lekin mavjud bo'shliqni to'ldirish uchun o'sishi mumkinligini ta'minlash uchun minmax(20vw, 1fr)dan foydalanadi. grid-gap ham 1vw yordamida o'rnatilgan bo'lib, bu grid elementlari orasidagi masofaning viewport o'lchamiga mutanosib ravishda masshtablanishini ta'minlaydi.

5. Responsiv Oraliq va Padding

Viewport birliklari bilan oraliq va paddingni boshqarish turli qurilmalarda izchil vizual uyg'unlikni ta'minlaydi. Bu elementlarning ekran o'lchamidan qat'i nazar juda siqilgan yoki juda tarqoq ko'rinmasligini ta'minlaydi.

            .container {
 padding: 5vw;
 margin-bottom: 3vh;
}

            

              
                Copy
              
            
          

Ushbu misolda .container elementi barcha tomonlarida viewport kengligining 5%iga teng paddingga va viewport balandligining 3%iga teng pastki marginga ega.

6. Masshtablanuvchi UI Elementlari

Tugmalar, kiritish maydonlari va boshqa UI elementlarini viewport birliklari yordamida o'lchamlarini belgilash orqali yanada responsiv qilish mumkin. Bu UI komponentlariga o'zlarining nisbiy proporsiyalarini saqlab qolish imkonini beradi va turli ekranlarda foydalanuvchi tajribasini yaxshilaydi.

            .button {
 font-size: 2.5vh;
 padding: 1vh 2vw;
 border-radius: 0.5vh;
}

            

              
                Copy
              
            
          

.button klassi viewport balandligiga (2.5vh) asoslangan shrift o'lchami va ham viewport balandligi, ham kengligiga asoslangan padding bilan belgilanadi. Bu tugma matnining o'qilishi oson bo'lishini va tugma o'lchamining turli ekran o'lchamlariga mos ravishda sozlanishini ta'minlaydi.

Viewport Birliklaridan Foydalanishning Eng Yaxshi Amaliyotlari

Viewport birliklari responsiv dizaynlar yaratishning kuchli usulini taklif qilsa-da, yuzaga kelishi mumkin bo'lgan muammolarni oldini olish uchun ulardan oqilona foydalanish va eng yaxshi amaliyotlarga rioya qilish muhimdir:

1. Minimal va Maksimal Qiymatlarni Hisobga Oling

Viewport birliklari ba'zida juda kichik yoki juda katta ekranlarda haddan tashqari qiymatlarga olib kelishi mumkin. Buning oldini olish uchun viewport birliklari qiymatlari uchun minimal va maksimal chegaralarni belgilash uchun min(), max() va clamp() CSS funksiyalaridan foydalanishni o'ylab ko'ring.

            h1 {
 font-size: clamp(2rem, 8vw, 5rem); /* Shrift o'lchami kamida 2rem, ko'pi bilan 5rem bo'lib, shu oraliqda viewport kengligi bilan masshtablanadi */
}

            

              
                Copy
              
            
          

clamp() funksiyasi uchta argument qabul qiladi: minimal qiymat, afzal qilingan qiymat va maksimal qiymat. Ushbu misolda font-size kamida 2rem, ko'pi bilan 5rem bo'ladi va shu chegaralar orasida viewport kengligi (8vw) bilan mutanosib ravishda masshtablanadi. Bu matnning kichik ekranlarda juda kichik yoki katta ekranlarda juda katta bo'lib ketishini oldini oladi.

2. Boshqa Birliklar Bilan Birlashtiring

Viewport birliklari em, rem va px kabi boshqa CSS birliklari bilan birlashtirilganda eng yaxshi ishlaydi. Bu sizga ham viewport o'lchamini, ham kontent kontekstini hisobga oladigan yanada nozik va moslashuvchan dizayn yaratishga imkon beradi.

            p {
 font-size: calc(1rem + 0.5vw); /* 1rem asosiy shrift o'lchami va masshtablash omili */
 line-height: 1.6;
}

            

              
                Copy
              
            
          

Ushbu misolda font-size calc() funksiyasi yordamida hisoblanadi, u 1rem asosiy shrift o'lchamiga 0.5vw masshtablash omilini qo'shadi. Bu matnning kichik ekranlarda ham har doim o'qilishi oson bo'lishini ta'minlaydi, shu bilan birga viewport o'lchamiga mutanosib ravishda masshtablanadi.

3. Turli Qurilmalar va Brauzerlarda Sinab Ko'ring

Har qanday veb-dasturlash texnikasi singari, dizaynlaringizni kross-brauzer muvofiqligi va optimal ishlashini ta'minlash uchun turli xil qurilmalar va brauzerlarda sinab ko'rish juda muhimdir. Turli ekran o'lchamlari va ruxsatlarini simulyatsiya qilish uchun brauzer dasturchi vositalaridan foydalaning va imkon qadar dizaynlaringizni haqiqiy jismoniy qurilmalarda sinab ko'ring. Odatda yaxshi qo'llab-quvvatlansa-da, brauzerlar o'rtasida nozik farqlar bo'lishi mumkin.

4. Qulaylikni Hisobga Oling

Tipografiya uchun viewport birliklaridan foydalanganda, matnning nogironligi bo'lgan foydalanuvchilar uchun o'qilishi oson va qulay bo'lib qolishini ta'minlang. Matnning barcha foydalanuvchilar uchun o'qilishi oson bo'lishini ta'minlash uchun ranglar kontrasti, shrift o'lchami va qator balandligiga e'tibor bering. WebAIM kontrast tekshirgichi kabi vositalar mos ranglar kontrasti nisbatlarini aniqlashda yordam berishi mumkin. Shuningdek, `html` elementida to'g'ridan-to'g'ri viewport birliklari bilan `font-size` yoki boshqa o'lchamga bog'liq xususiyatlarni o'rnatishdan saqlaning, chunki bu foydalanuvchining matn o'lchamiga oid afzalliklariga xalaqit berishi mumkin.

5. CSS O'zgaruvchilari (Maxsus Xususiyatlar) Bilan Foydalaning

CSS o'zgaruvchilari (maxsus xususiyatlar) bilan viewport birliklaridan foydalanish texnik xizmat ko'rsatishni yaxshilaydi va uslublar jadvalingiz bo'ylab osonroq sozlashlarga imkon beradi.

            :root {
 --base-padding: 2vw;
}

.element {
 padding: var(--base-padding);
}

.another-element {
 margin-left: var(--base-padding);
}

            

              
                Copy
              
            
          

Ushbu misolda --base-padding o'zgaruvchisi 2vw qiymati bilan aniqlangan. Keyin bu o'zgaruvchi turli elementlarning padding va marginini o'rnatish uchun ishlatiladi, bu sizga bir joyda o'zgaruvchi qiymatini o'zgartirish orqali butun veb-saytingiz bo'ylab masofani osongina sozlashingizga imkon beradi.

Ilg'or Texnikalar va Mulohazalar

1. Dinamik O'zgartirishlar Uchun JavaScriptdan Foydalanish

Ba'zi stsenariylarda sizga foydalanuvchi harakatlari yoki boshqa hodisalarga asoslanib viewport birliklari qiymatlarini dinamik ravishda sozlash kerak bo'lishi mumkin. JavaScript viewport o'lchamlariga kirish va CSS o'zgaruvchilarini shunga mos ravishda yangilash uchun ishlatilishi mumkin.

            // JavaScript
function updateViewportVariables() {
 const vh = window.innerHeight * 0.01;
 document.documentElement.style.setProperty('--vh', `${vh}px`);
}

window.addEventListener('resize', updateViewportVariables);
updateViewportVariables(); // Dastlabki chaqiruv

// CSS
.element {
 height: calc(var(--vh, 1vh) * 50); /* --vh aniqlanmagan bo'lsa, 1vh ga qaytadi */
}

            

              
                Copy
              
            
          

Ushbu kod parchasi JavaScript yordamida viewport balandligini hisoblaydi va shunga mos ravishda CSS o'zgaruvchisini (--vh) o'rnatadi. Keyin .element o'z balandligini o'rnatish uchun ushbu o'zgaruvchidan foydalanadi va uning har doim viewport balandligining 50%ini egallashini ta'minlaydi. `1vh`ga qaytish, CSS o'zgaruvchisi to'g'ri o'rnatilmagan taqdirda ham elementning munosib balandlikka ega bo'lishini ta'minlaydi.

2. Mobil Klaviatura Ko'rinishini Boshqarish

Mobil qurilmalarda virtual klaviatura ko'rsatilganda viewport o'lchami o'zgarishi mumkin. Bu to'liq balandlikdagi bo'limlar uchun viewport birliklariga tayanadigan maketlarda muammolarni keltirib chiqarishi mumkin. Buni yumshatishning bir usuli - bu stsenariylar uchun xatti-harakatlarni belgilashga imkon beruvchi Katta, Kichik va Dinamik Viewport birliklaridan foydalanishdir. Bular `lvh`, `svh` va `dvh` birliklari bilan mavjud. `dvh` birligi yumshoq klaviatura ko'rsatilganda sozlanadi. E'tibor bering, ba'zi eski brauzerlarda qo'llab-quvvatlash cheklangan bo'lishi mumkin.

            .full-height-section {
 height: 100dvh;
}

            

              
                Copy
              
            
          

3. Ishlash Unumdorligini Optimallashtirish

Viewport birliklari odatda yuqori unumdorlikka ega bo'lsa-da, ulardan haddan tashqari foydalanish sahifani renderlash tezligiga potentsial ta'sir qilishi mumkin. Ishlash unumdorligini optimallashtirish uchun sahifangizdagi har bir element uchun viewport birliklaridan foydalanishdan saqlaning. Buning o'rniga, ularni asosiy maket komponentlari va tipografiya uchun strategik ravishda ishlatishga e'tibor qarating. Shuningdek, JavaScriptda viewport birliklari qiymatlarini qayta hisoblash sonini minimallashtiring.

Turli Mamlakatlar va Madaniyatlar Bo'yicha Misollar

Viewport birliklarining go'zalligi shundaki, ular turli joylarda izchil foydalanuvchi tajribasini yaratishga yordam beradi. Keling, viewport birliklarini madaniy mulohazalar bilan qanday qo'llash mumkinligini ko'rib chiqaylik:

• Sharqiy Osiyo tillari (masalan, xitoy, yapon, koreys): Bu tillar belgilarning murakkabligi tufayli ko'pincha kattaroq shrift o'lchamlarini talab qiladi. Viewport birliklari ekran maydoni cheklangan mobil qurilmalarda o'qilishi oson bo'lishini ta'minlaydi. `vw` bilan birga `rem` birliklariga asoslangan yuqoriroq minimal shrift o'lchami bilan `clamp()` funksiyasidan foydalanish ayniqsa foydali bo'lishi mumkin.
• O'ngdan chapga yoziladigan tillar (masalan, arab, ibroniy): Mantiqiy viewport birliklari (`vi`, `vb`) maket yo'nalishi va oraliq masofalarining izchilligini saqlash uchun bebaho hisoblanadi, ayniqsa akslantirilgan maketlar va moslashtirilgan kontent oqimi bilan ishlaganda.
• Internet tezligi har xil bo'lgan mamlakatlar: Rasm o'lchamlarini optimallashtirish va tez yuklanish vaqtini ta'minlash juda muhim. Viewport birliklari bilan yaratilgan tomonlar nisbati qutilari rasmlar va videolarning sekinroq ulanishlarda tezroq yuklanishi uchun kichikroq fayl o'lchamlariga moslashayotganda o'z nisbatlarini saqlab qolishiga imkon beradi.
• Madaniyatlararo qulaylik: Asosiy shrift o'lchami uchun `rem` va masshtablash uchun `vw` kombinatsiyasidan foydalanish foydalanuvchilarga geografik joylashuvi yoki madaniy kontekstidan qat'i nazar, o'zlarining shaxsiy ehtiyojlariga qarab o'lchamlarni o'zgartirish uchun moslashuvchanlikni ta'minlaydi. Foydalanuvchilarga shrift o'lchamlarini sozlash imkoniyatini berish universal darajada foydalidir.

Xulosa

CSS Viewport Birliklari har qanday qurilmaga muammosiz moslashadigan chinakam responsiv va masshtablanuvchi veb-dizaynlarni yaratish uchun ajralmas vositadir. vw, vh, vmin, vmax, vi va vb ning funksionalligini tushunib, eng yaxshi amaliyotlarga rioya qilish orqali siz viewport birliklarining to'liq potentsialini ochishingiz va barcha platformalarda izchil tajriba taqdim etadigan vizual jozibador va foydalanuvchilarga qulay veb-saytlar yaratishingiz mumkin. Foydalanuvchining qurilmasi yoki madaniy kelib chiqishidan qat'i nazar, global miqyosda qulay va estetik jihatdan yoqimli veb-tajribalar yaratish uchun ushbu birliklarni qabul qiling.

Dizaynlaringizning inklyuziv va hamma uchun foydalanishga yaroqli bo'lishini ta'minlash uchun turli brauzerlar va qurilmalarda sinchkovlik bilan sinab ko'rishni va har doim qulaylikni birinchi o'ringa qo'yishni unutmang.