CSS yordamida moslashuvchan fotogalareya yaratish
Ushbu maqolada moslashuvchan fotogalareyani CSS ning o’zida yaratishni ko’ramiz. Moslashuvchan galareyada rasmlar o’lchami va maket ekran razmeriga avtomatik moslashishi kerak. Ushbu usulni men Turkcha-O’zbekcha Lug’at ilovasida foydalandim.
Portrait rejimda:
Landscape rejimda:
Agar siz moslashuvchan web dizayn haqida uncha yaxshi bilmasangiz, ushbu maqolani o’qishdan oldin Moslashuvchan web dizayn haqidagi maqolalarni o’qib chiqishingizni maslahat beraman.
Avval quidagi fotogalareya demo variantini oching va brovzer razmerini asta-sekin o’zgartiring. Brovzer kichiklashayotganda, ustunlar soni kamayishi, rasm o’lchami ekran o’lchamiga mos ravishda o’zgarishini ko’rasiz. Agar tablet yoki smartfoningiz bo’lsa, buni qurilmangizda ham tekshirib ko’ring. Agar bunday qurilmangiz bo’lmasa, unda protofluid.com mobil qurilma va tabletlarda mobil web sahifalarni tekshirish uchun ajoyib sayt(xuddi emulyator kabi).
Ushbu sayt yordamida olingan natija:
Moslashuvchan kvadratlar yasash
Bizni proektimizni asosi moslashuvchan kvadratlardir — ya’ni kvadratlar maketga nisbatan avtomatik vertikal va gorizontal ravishda o’zgaradi. Bunda biz DIV lardan foydalanamiz va width(eni)ni foiz(%) larda qilamiz.
Masalan, width: 25% bo’lgan div yaratamiz. Div eni 25% bo’ladi, bu 25% ni qayerdan oladi? 25% shu div parentidan oladi. Agar shu divni to’g’ridan-to’g’ri body ichiga joylasak quidagi natija hosil bo’ladi:
Moslashuvchan kvadrat
Agar biz divga height: 25%; qo’shsak:
Agar brovzerni kichiklashtirsangiz, div balandligi brovzer balandligiga, eni brovzer eniga bog’langanini ko’rishingiz mumkin. Bu yaxshi, lekin, biz shaklni kvadrat bo’lishini hohlaymiz. Shuning uchun, height: 25%; o’rniga, padding-bottom:25%; ni qo’yamiz, natijada div har doim kvadrat shaklida bo’ladi.
Endi brovzerni razmerini o’zgartirsak ham kvadrat saqlanib qoladi. Lekin, hali ish tugamadi. Yuqorida e’tibor qilgan bo’lsangiz, matn olib tashlangan. Agar matnni joylashtirsak, matn balandligi + padding-bottom bo’ladi, va div balandligi uzunlashib ketadi.
Bu muammoni hal qilish uchun biz bu div ichiga yana bir div qo’yamiz va unga position: absolute o’rnatamiz. Bu holda, ichki div(inner-box) joylashuvi butun sahifa(body)ga bog’lanib qoladi. Tashqi div(box)ni position: relative qilamiz. Bu absolute joylashuvni butun sahifaga emas, balkim uning tashqarisida turgan elementga bog’liq qiladi.
Agar div ichiga matn joylashtirsak, kvadratlik yo'qoladiva balandligi uzunlashadi
Grid yaratish
Biz, moslashuvchan kvadrat yaratib oldik, endi biz kvadratlar to’plamidan iborat GRID yaratib olishimiz kerak. Buning uchun, hamma kvadrat boxlarni bitta id=’wrapper’ divga joylashtiramiz va wrapper divga overflow: hidden; va boxga float:left; stilini beramiz (Demo). Demoni oching va brovzeringiz razmerini o’zgaritirib ko’ring.
Gridni moslashuvchan qilish
Biz gridni yaratdik, ammo uni katta ekranda ochsak kvadratlar judayam katta, kichik ekranda ochsak kvadratlar kichkini ko’rinishda chiqyapdi. Shu joyda css media so’rovlar yordamida gridni moslashuvchan qilamiz. Ya’ni ekran o’lchamiga bog’liq holda, har bir kvadrat eni(width) va padding-bottom o’zgarishi kerak. Quidagi css kod 300, 400, 780, 1000, 1290 va 1490 oraliqdagi ekranlarni o’z ichiga oladi(demo).
/* agar ekran 300 */
@media only screen and (max-width : 300px){
/* Smartphone view: 1 qator */
.box {
width: 98%;
padding-bottom: 98%;
}
}
@media only screen and (max-width : 400px) and (min-width : 301px){
/* Smartphone view: 2 qator */
.box {
width: 48%;
padding-bottom: 48%;
}
}
@media only screen and (max-width : 780px) and (min-width : 401px) {
/* Small desktop / ipad view: 3 qator */
.box {
width: 32%;
padding-bottom: 32%;
}
}
@media only screen and (max-width : 1000px) and (min-width : 781px) {
/* Medium desktop: 4 qator */
.box {
width: 24%;
padding-bottom: 24%;
}
}
@media only screen and (max-width : 1290px) and (min-width : 1001px) {
/* Medium desktop: 5 qator */
.box {
width: 19%;
padding-bottom: 19%;
}
}
@media only screen and (max-width : 1490px) and (min-width : 1291px) {
/* Medium desktop: 6 qator */
.box {
width: 15%;
padding-bottom: 15%;
}
}
Bu kod, IE ning 8 va undan eski versiyalarida ishlamaydi. Buning uchun quidagi kodni qo’shish kerak:
Nihoyat gridni moslashuvchan qildik, agar brovzer o’lchamini judayam kichik qilsangiz, kvadratlar faqat bir qatorga joylasadi. Kengaytirib borganiz sari, qatorlar soni oshib boradi. Mana shu moslashuvchanlik deyiladi.
Asosiy qism: fotogalareya
Endi yuqorida o’rganganlarimiz yordamida galareyani yaratamiz. Bizda 12 ta rasm bor, va har bir rasm 460 px kvadrat.
HTML kod
Moslashuvchan foto galareya
...