Veb-brauzerlarning foiz ko'rsatkichlari yordamida ekranni qanday aniqlay olishini bilib oling
E'tiborli veb-dizaynning ko'plab talabalari kenglik qiymatlari uchun foizlarni ishlatish uchun qiyin vaqtlarga ega. Xususan, brauzerning ushbu foizlarni qanday hisoblashi bilan bog'liq chalkashliklar bor. Quyida siz foizlarning veb-saytidagi kenglik hisob-kitoblari uchun qanday ishlashini batafsil tushuntirasiz.
Pixels width values uchun foydalanish
Piksellarni kenglik qiymati sifatida ishlatganda, natijalar juda sodda. Agar hujjatning boshidagi bir elementning kenglik qiymatini 100 piksel kengligida belgilash uchun CSS dan foydalansangiz, u element veb-sayt tarkibidagi yoki altbilgisida yoki boshqa joylarda 100 piksel kenglikda bo'lgan sizniki bilan bir xil bo'ladi. sahifa. Piksellar mutlaq qiymatdir, shuning uchun hujjatning qaerda bo'lishidan qat'i nazar, 100 piksel 100 pikseldir. Afsuski, piksel qiymatlari tushunish oson bo'lsa-da, ular sezgir veb-saytlarda yaxshi ishlamaydi.
Ethan Marcotte, bu uslubni 3 ta asosiy printsipni o'z ichiga olgan holda tushuntirib, "sezgir veb-dizayn" atamasini yaratdi:
- Suyuqlik tarmog'i
- Suyuq muhit
- Media so'rovlari
Bu birinchi ikkita nuqta, suyuqlik panjarasi va suyuqlik omborlari qiymatlarni o'lchash uchun piksellar o'rniga foizlar yordamida erishiladi.
Kenglik qiymatlari uchun foizlarni ishlatish
Biror element uchun kenglik o'rnatish uchun foizlarni foydalanganda, ushbu elementni ko'rsatadigan haqiqiy hajm hujjatning qaerga qarab o'zgaradi. Foizlar nisbiy qiymatdir, ya'ni ko'rsatilgan hajm sizning hujjatdagi boshqa elementlarga nisbatan.
Misol uchun, tasvirning kengligini 50% ga sozlasangiz, bu tasvir normal o'lchamining yarmida ko'rsatilishini anglatmaydi. Bu keng tarqalgan noto'g'ri tushunchadir.
Agar rasm 600 piksel kengligida bo'lsa, CSS qiymatini 50% da ko'rsatish uchun bu veb-brauzerda 300 piksel kenglikda bo'lishini anglatmaydi. Ushbu foiz nisbati tasvirning o'ziga xos o'lchamiga emas, balki ushbu tasvirni o'z ichiga olgan elementga qarab hisoblab chiqiladi. Agar konteyner (bir bo'lak yoki boshqa HTML elementi bo'lishi mumkin) 1000 piksel kengligida bo'lsa, tasvir 500 pikselda namoyon bo'ladi, chunki bu qiymat konteynerning kengligining 50% ni tashkil qiladi. Agar tarkibiy qism 400 piksel kengligida bo'lsa, tasvir faqat 200 pikselda ko'rsatiladi, chunki bu qiymat konteynerning 50% tashkil qiladi. Bu erda keltirilgan tasvir butun elementga bog'liq bo'lgan 50% hajmiga ega.
Esda tutingki, sezgir dizayn suyuqlikdir. Displey o'lchami / uskuna o'zgarishi bilan tartiblar va kattaliklar o'zgaradi . Agar siz bu haqda jismoniy, veb-sahifalardagi so'zlar haqida o'ylamoqchi bo'lsangiz, u mahsulot mahsuloti bilan to'ldirilgan karton qutiga o'xshaydi. Agar siz ushbu quti yarim material bilan to'ldirilgan deb hisoblasangiz, kerak bo'lgan qadoqlash miqdori qutining kattaligiga qarab o'zgaradi. Veb-dizayndagi foiz kengliklari uchun ham xuddi shunday.
Boshqa foizlarga asoslangan foizlar
Tasvir / konteyner misolida, javobli tasvirning qanday aks etishini ko'rsatish uchun o'z ichiga olgan element uchun piksel qiymatlarini ishlatardim. Aslida, tarkibdagi element elementlarning foiziga o'rnatiladi va bu konteyner ichidagi tasvir yoki boshqa elementlar o'z qiymatlarini bir foiz ulushiga asoslanadi.
Buni amalda ko'rsatadigan yana bir misol.
Sizning saytingiz "konteyner" (keng tarqalgan veb-dizayn amaliyoti) sinfiga ega bo'lgan bo'lim ichida joylashgan veb-saytingiz borligini ayting. Bu bo'linma ichida uchta bo'linishlar mavjud, ular oxir-oqibatda 3 vertikal ustun sifatida ko'rsatiladi. Bu HTML shunday bo'lishi mumkin:
Endi siz "konteyner" bo'linmasining o'lchamini 90% deb belgilash uchun CSS dan foydalanishingiz mumkin. Ushbu misolda konteynerlar bo'linmasining tanadan boshqa narsani o'rab turgan boshqa elementi yo'q. Odatiy holatda tanasi brauzer oynasining 100% qismini beradi. Shuning uchun "konteyner" bo'linishining ulushi brauzer oynasining o'lchamiga asoslanadi. Ushbu brauzer oynasi kattaligi o'zgarganda, bu "konteyner" ning hajmi ham shunday bo'ladi. Agar brauzer oynasi 2000 piksel kengligida bo'lsa, bu bo'lim 1800 pikselda ko'rsatiladi. Bu 2000 yilgi (2000 x .90 = 1800) 90 foizni tashkil qiladi, bu brauzerning o'lchami.
Agar "konteyner" ichidagi "chap" bo'linmalarining har biri 30% gacha o'rnatilgan bo'lsa, bu misolda ularning har biri 540 piksel kenglikda bo'ladi. Bu konteyner 1800 x 30 sm hajmdagi 1800 pikseldan 30% deb hisoblanadi. Agar biz ushbu konteynerning foizini o'zgartirsak, bu ichki bo'linmalar ular tarkibidagi elementga bog'liq bo'lgani uchun ular ko'rsatadigan kattaligida ham o'zgaradi.
Keling, brauzer oynasi 2000 piksel kengligida qoladi, lekin biz konteynerning foiz qiymatini 90% o'rniga 80% ga o'zgartiramiz. Ya'ni hozirgi kunda 1600 piksel kenglikda (2000 x .80 = 1600). CSS-ni biz 3 "jig" bo'linmalari kattaligiga almashtirsak va ularni 30% da qoldirsak ham, ular tarkibidagi elementni o'zlari o'zgartirgan kontekstdan beri boshqacha qilib ko'rsatishadi. Ushbu 3 ta bo'linma hozir 480 piksel kenglikda, ya'ni 1600 dan 30% yoki konteynerning o'lchami (1600 x .30 = 480) bo'ladi.
Buni yanada ko'proq qilib olsak, agar bu "bo'g'in" bo'linmalaridan birida rasm bo'lgan bo'lsa va bu tasvir foiz bilan o'lchangan bo'lsa, uning o'lchovi uchun "kontent" o'zi bo'ladi. "Kol" bo'linishi hajmi o'zgarganligi sababli, uning ichida rasm ham bo'lishi mumkin edi. Brauzer yoki "konteyner" ning o'lchami o'zgarmagan bo'lsa, bu "kol" ichidagi tasvirning o'lchamini o'zgartiradigan uchta "kola" bo'linmalariga ta'sir qilishi mumkin. Ko'rib turganingizdek, bularning barchasi foiz ulushiga asoslangan o'lchov qiymatiga to'g'ri keladi.
Agar veb-sahifaning ichidagi elementning kengligi uchun foizli qiymat qo'llanilganda qanday ishlashini ko'rib chiqsangiz, ushbu element sahifadagi belgining tarkibida joylashgan kontekstni tushunib olishingiz kerak.
Qisqa bayoni; yakunida
Foizlar sezgir veb-saytlar uchun tartibni yaratishda juda muhim rol o'ynaydi. O'zingizning o'lchamingizni bir-biriga nisbatan bo'lgan suyuqlik panjarasi uchun javob berish yoki foiz kengliklaridan foydalansangiz bo'lsin, bu hisob-kitoblarni tushunib olish siz xohlagan ko'rinishga erishish uchun zarur bo'ladi.