Hammaga salom! Bugun biz gaplashamiz tarmoq tizimlari nima? yoki oddiygina sezgir tartibda moslashuvchan panjaralar.

Birinchidan, biz nima ekanligini ta'riflaymiz Grid tizimi.

Grid tizimi - foydalanuvchiga satrlar va ustunlar tizimidan foydalangan holda sahifalar joylashishini boshqarishga imkon beradigan sinfga asoslangan uslublar to'plami.

Aytaylik, bizning blog sahifamiz bor. U 2 ustunga bo'lingan: asosiy qismi chapda, yon panel esa o'ng tomonda. Keling, bunday sahifa uchun moslashuvchan panjara yaratishga harakat qilaylik.

Boshlash uchun biz boshlang'ich bo'lishimiz kerak, ammo hTML belgilash.

Bu erda biz butun sahifani o'z ichiga olgan blokga egamiz, unda blog bilan blok mavjud bo'lib, unda 2 ta blok mavjud: sahifaning asosiy qismi va yon panel.

Shunday qilib, bizning butun sahifamiz kattalashtiriladi 960piksel... Butun katak 12 ustunga bo'lingan 69 piksel... har biri. Blog uchun bo'lim kengligi bo'ladi 900 piksel... Sahifaning asosiy qismi bo'ladi 566 piksel, yon panel - 331 piksel.

Oxir oqibat biz buni olamiz

#sahifa (
margin: 36px auto;
kengligi: 960 piksel;
}

Blog (
margin: 0 auto 53px;
kengligi: 900 piksel;
}

Blog .main (
suzuvchi: chap;
kengligi: 566 piksel;
}

Blog .sidebar (
suzuvchi: o'ng;
kengligi: 331 piksel;
}

Hammasi yaxshi, lekin, siz ko'rib turganingizdek, har bir narsa statik, piksel bilan berilgan. Bizning sahifamiz qaysi ekranda ko'rilganiga qarab bizning o'lchamimiz o'zgarishini xohlaymiz, shuning uchun biz hamma narsani sozlashimiz kerak foiz... Qani buni bajaraylik.

Buning uchun shriftlar bilan bir xil formulalar mavjud

maqsad / kontekst \u003d natija

Keling, butun sahifaning blokini pikseldan foizga tarjima qilaylik.

#sahifa (
margin: 36px auto;
kengligi: 90%;
}

90% tanlangan, chunki bu holda biz qirralarning chekkalariga ham ega bo'lamiz. 5% ... Biroq, siz boshqa qiymatni tanlashingiz mumkin.

Biz quyidagi formuladan foydalanamiz: 900 / 960 = 0.9357

Natijani quyidagicha ko'paytiring 100 qiziqish olish va biznikiga yozish cSS.

Blog (
margin: 0 auto 53px;
kengligi: 93,75%;
}

Ustunlar uchun xuddi shunday qiling, lekin kontekst o'zgarganiga e'tibor bering. Chunki ustunlar sinf bilan blok ichida joylashgan .blog, keyin bu kontekst bo'ladi. Keling, hisoblaymiz.

566 ÷ 900 \u003d .628888889

331 ÷ 900 \u003d .367777778

Biz hamma narsani foizlarga o'tkazamiz va uslublar jadvaliga yozamiz.

Blog .main (
suzuvchi: chap;
kengligi: 62.8888889%;
}

Blog .sidebar (
suzuvchi: o'ng;
kengligi: 36.7777778%;
}

Hammasi shu! Endi bizda moslashuvchan panjara mavjud va uni maket uchun ishlatishimiz mumkin.

Ko'rib turganingizdek, hamma narsa juda oddiy. Moslashuvchan panjara, egiluvchan shrift singari, xuddi shu formulaga asoslangan bo'lib, esda tutingki, siz javob beradigan saytlarni hech qanday muammosiz yaratishingiz mumkin.

Izoh! Ko'rib turganingizdek, biz juda uzoq foizlar bilan yakun topdik. Ba'zilar sizga ularni yumaloq qilishni maslahat berishi mumkin, ammo bu hech qachon qilinmasligi kerak! Yodingizda bo'lsin!

Va barchasi men uchun, e'tiboringiz va muvaffaqiyatli javob rejangiz uchun tashakkur!

Mavzuni davom ettirish moslashuvchan maket... Bugun biz moslashuvchan maketning uchta kitidan biri haqida gaplashamiz - panjara asosidagi tartib (grid asosidagi egiluvchan tartib). Qolgan ikkitasi moslashuvchan tasvirlar.

20-asrning o'rtalarida grafik dizaynerlar kontseptsiyani ommalashtirdilar tipografik, yoki modulli, mash - tarkibiga ega modullarni joylashtirish mumkin bo'lgan ustunlar va qatorlarning oqilona tizimi. Bu yangi va juda uyg'un ko'rinishga ega edi.

Biroq, grafik dizayn va veb-dizayn, Odessada aytilganidek, ikkita katta farqdir. Asosiy moment bu erda sahifa hajmi. Tipografiyada u aniqlanadi va veb-sahifa ko'rilayotgan narsaga qarab kengayishi va qisqarishi mumkin.

Modulli tarmoqni veb-sahifaga qo'llash uchun oddiy mutanosiblik formulasidan foydalaning:

maqsad / kontekst \u003d natija

Ushbu formulani tushunishning eng oson usuli - bu tushunarli misol. Aytaylik, bizda ikkita ustun - kontent qismi va yon panelda chizilgan veb-sayt tartibi mavjud:

Biz uni "kauchuk" dan tashkil qilamiz. Ammo bu erda muammo: ikkala blokning kengligini qanday o'rnatish kerak? Axir, agar siz uni piksel bilan yozsangiz, unda ular endi rezina bo'lmaydi. Shunday qilib, siz piksellardan emas, balki foizlardan foydalanishingiz kerak. Kechirasiz va qanday qadriyatlarni yozishim kerak? Oxir oqibat, siz biron bir narsani boshlashingiz kerak.

Siz, albatta, ko'z bilan taxmin qilishingiz mumkin: tarkib umumiy sahifa kengligining taxminan 70 foizini, yon panel esa 30 foizni tashkil qiladi. Ammo to'g'ri dizayn dizaynerlari hech qachon ko'z bilan hech narsani taxmin qilmaydi. Bizga aniq o'lcham kerak.

Mutanosiblik formulasi aynan mana shu uchun mo'ljallangan. Biz faqat ichki bloklarning kengligini olamiz va uni umumiy sahifa kengligiga bo'linamiz. Mana butun sahifa kontekstva ichki birliklarning har biri, o'z navbatida, nishon yuqoridagi formuladan.

660 / 960 = 0,6875
300 / 960 = 0,3125

Ushbu ma'lumotlarni foizlarga aylantirishgina qoladi. Ko'p bezovta qilmasdan, vergulni ikkita belgini o'ng tomonga siljiting. Biz olamiz:

68,75%
31,25%

Bu shunchaki oddiy. Biroq, keling, vazifani murakkablashtiraylik. Bizda tarkib qismi yana ikkita tengsiz qismga bo'lingan deylik. Masalan, chap tomonda maqolaning sanasi va ijtimoiy tugmachalari vertikal ravishda joylashtirilgan tor ustun, o'ng tomoni esa keng va bizda maqola matni mavjud.

Dizayn tartibidan bilamizki, bu tor ustunning kengligi 120 pikselni, kengligi esa 520 pikselni tashkil qiladi.Bu raqamlarni% ga qanday tarjima qilamiz? Shunga qaramay, mutanosiblik formulasini qo'llang. Ammo bu safar biz sahifaning butun kengligidan kontekst sifatida emas, balki ushbu ikkita ustunni o'z ichiga olgan blokning kengligidan, ya'ni biz tarkibidagi tarkibning kengligidan 660 pikselni foydalanmoqdamiz. Biz ajratamiz:

120 / 660 = 0,1818
520 / 660 = 0,7878

Foiz sifatida biz 18,18% va 78,78% ni olamiz

Aytgancha, sezgir tartibni ishlatadigan zamonaviy uslubdagi fayllarda, to'g'ri dizaynerlar izohlar kabi o'xshash hisob-kitoblarni qo'shadilar. Yaxshi ravshanlik uchun. Odatda shunday ko'rinadi:

Tarkib (
kengligi: 68,75%; / * 660px / 960px * /
}

Umid qilamanki bu muammo bo'lmagan. Oldinga boramiz!

Tarmoq asosidagi tartib

Yuqoridagi misollar, albatta, hali panjara emas. Xo'sh, ikkita ustunli panjara nima? Haqiqiy modulli tarmoq ham dizaynerlarga, ham dizaynerlarga ko'plab ustunlar va alohida bloklar bilan murakkab saytlarni yaratishda yordam berish uchun mo'ljallangan.

Shu sababli, ushbu usulni oson va sodda tarzda amalga oshiradigan juda ko'p qulay xizmatlar va vositalar paydo bo'ldi. Masalan, 960.gs. Bu erda siz nafaqat modulli panjara asosida tartib tamoyilini vizual ravishda o'rganishingiz, balki shablonlarni yuklab olishingiz va ulardan foydalanishingiz mumkin.

Aslida, bunday xizmatlar endi o'n tiyinga aylandi! Ular shuningdek ramkalar deb nomlanadi. Qaysi birini sizga ko'proq yoqishini tanlang. Bu erda javob beradigan veb-dizayn uchun 30 ta CSS ramkalari mavjud.

Ushbu modulli tarmoqlar nima uchun kerak?

Avvalo, veb-sayt sahifasidagi tarkibni vizual ravishda tartibga solish uchun modulli katakchalar kerak. Bu nafaqat estetik nuqtai nazardan chiroyli va foydalanuvchining ko'ziga yoqimli, balki ishlab chiquvchilarning o'zi uchun ham qulaydir. Ayniqsa, agar sayt haqiqatan ham tuzilishi va mazmuni bo'yicha murakkab bo'lsa.

Bunga qo'shimcha ravishda, bunday modulli panjaralarni har xil o'lchamdagi tasodifiy tarqalgan bloklarga qaraganda sezgir qilish ancha oson.

Va, albatta, bunday saytlarning rivojlanish tezligi ancha yuqori. Sizni aldash va g'ildirakni noldan qayta ixtiro qilishning hojati yo'q. Tegishli ramkani tanlash va undan foydalanib veb-sayt yaratish kifoya.

Umid qilamanki, siz hozirda tarmoqqa asoslangan sezgir tartib nima ekanligini bilasiz.

Keyingi safar, moslashuvchan tasvirlar haqida aniq tartibda gaplashamiz. Juda muhim va bahsli mavzu. Tartibga tushib qolmaslik uchun uni ham yaxshi o'rganishingizni tavsiya qilaman. Aloqada qoling! Yaxshisi, Web Council axborot byulleteniga obuna bo'ling.

Panjara tanlash haqida gap ketganda, ko'p variantlar mavjud. Quyida siz o'zingizning loyihalaringizda erkin foydalanishingiz mumkin bo'lgan (va nafaqat). Ushbu CSS katakchalari sizga tezda sezgir veb-sayt yaratishda yordam beradi. Maqolaning oxirida quyida tasvirlangan mashlarni taqqoslaydigan jadval mavjud.

1. Skelet

Skelet bu CSS fayllari to'plami va veb-dizaynerlar uchun PSD shablonidir. Skeleton mualliflari tomonidan yaratilgan ushbu fayllar sizga javob beradigan maket yaratishda yordam beradi. Skeletda uslublar qayta tiklangan, bu qulay. Odatiy ravishda skelet 960 pikselli tarmoqqa asoslangan (kengligi 980 piksel), skelet bloklari belgilangan kenglikda; bloklar sayt atrofidagi bo'sh joy tufayli brauzerga o'rnatiladi; brauzer oynasini o'zgartirganda gorizontal aylantirish ko'rinmaydi.

Bloklar belgilangan kenglikda bo'lganligi sababli, bunday panjarani sezgir emas, balki javob beradigan deb atash mumkin. Men uni ishlatishim ehtimoldan yiroq emas.

2. Oddiy panjara

Agar siz minimalist bo'lsangiz, unda bu mash sizga mos keladi. Odatiy tarmoq kengligi 1140px. Tarmoq mualliflarining fikriga ko'ra, saytni maksimal kengligi kichikroq qilish noto'g'ri. Skeletdan farqli o'laroq oddiy tarmoq o'zini sezgir tutadi va sezgir dizayn tushunchasini qondiradi. Yuqorida aytib o'tilganidek, maksimal panjara kengligi 1140 piksel, ammo bu qiymatni o'zgartirish qiyin emas, chunki barcha tarmoq bloklari foizlarda ko'rsatilgan: bu javob beradigan dizayn degani! CSS faylida faqat bitta media-so'rov mavjud:
@mediahandheld, onlyscreenand (max-width: 767px), bu kamchilik sifatida qayd etilishi mumkin.

Aslida, bu narsa qulay, lekin rivojlanish jarayonida siz uni o'zgartirishingiz kerak bo'ladi.

Simple Grid - engil grid uchun asos, Simple Grid esa CSS ramkasi emas. Simple Grid tugmachalar, jadvallar, shriftlar va boshqalar uchun uslublardan mahrum. Simple Grid ikkitasi bilan ishlaydi turli xil turlari to'rlar. Shunga o'xshash tarkib panjarasi mavjud

va shunga o'xshash tartib uchun panjara ... Simple Grid shuningdek, sezgir tartiblarni qo'llab-quvvatlaydi. Panjara kauchuk ustunlarga ega va panjara brauzer oynasining o'lchamiga qarab hajmini o'zgartiradi. Uchun mobil qurilmalar panjara ustunlarini bir-birining ostiga suyakka qilib joylashtiradi.

Oddiy Grid sozlamalari

Simple Grid-ning asosiy sozlamalari boshqa har qanday tarmoqqa o'xshaydi. Birinchidan, siz panjaraingizni sinf bilan divga o'rashingiz kerak. Agar panjara 20px hajmiga ega bo'lishini istasangiz, grid-pad sinfini qo'shing. Keyin, panjara o'lchamlarini afzal ko'rganingiz asosida, kerakli sinflarni qo'shing. Masalan, chap ustunli va asosiy blokli (tarkib uchun) panjarani xohlasangiz, quyidagi koddan foydalaning:

HTML

Agar siz 4 ta ustunni olishni istasangiz (tarkib uchun) quyidagi koddan foydalanishingiz mumkin:

HTML

Bizning katakchamizning birinchi ustuni (tarkib uchun) har doim o'rash qutisining chap chetiga nisbatan suzadi. Agar ustunni o'ng qirraga nisbatan suzmoqchi qilmoqchi bo'lsangiz, push-right sinfini qo'shing.

Simple Grid, masalan, CSS-fokuslarga asoslangan.

Tegishli maqolalar:

• habrahabr.ru saytidagi "Bu tarmoqlarni o'ylamang" maqolasining tarjimasi - muammosiz panjaralar

3. Chuqur tarmoq

Chuqur panjara ko'pgina brauzerlarda tartibni juda aniq aks ettirishga imkon beradi. Qanday qilib ular javob beradigan tartib uchun bunday yutuqlarga erishdilar? Chuqur panjara ustun o'lchamlarini hisoblashda salbiy chegaralardan foydalanadi.

4. Griddle

Griddle (github.com/necolas/griddle) - bu zamonaviy brauzerlarga (IE8 +) yo'naltirilgan veb-dizaynerlar uchun tarmoq. CSS fayli sass funktsiyalari va aralashmalar yordamida yaratiladi. Inline-block va box-size xususiyatlaridan foydalanish float-asosidagi layouts-ga nisbatan yangi tartib variantlarini taqdim etadi. Kamchiliklari: panjara CSS fayliga ega emas, faqat sass; siz misolni yuklab olmaysiz; faqat sass.

5. Qo'shimcha kuchga javob beradigan panjaralar

Agar siz boshqa CSS tarmoqlari sizni cheklayotganini his qilsangiz, sizning ustuvorligingiz sizning javob rejangizning turli ekranlarga qanday moslashishini to'liq nazorat qilish bo'lsa, agar siz CSS-dagi sinf nomlari haqida qayg'ursangiz, unda siz buni foydali deb topishingiz mumkin Qo'shimcha kuchga javob beradigan tarmoqlar.

6. Proportional kataklar

Ushbu CSS echimi bizning maketimizni masshtablashda juda tez-tez uchraydigan muammoni hal qiladi, ya'ni turli xil ko'rinishlar uchun oluklarning nomutanosib o'lchamlari. Proportional panjaralar sizning kauchuk ustunlar (lar) dan foydalanishga imkon berganda, sizning oluklaringiz uchun belgilangan o'lchamlardan foydalanishga imkon beradi.

Muallifning g'oyasi quyidagicha: muallif qutilar bilan birgalikda qat'iy oraliq yaratishga imkon beradigan box-sizeing xususiyatidan foydalanadi. Ustunlar orasidagi masofa har bir aniq to'xtash nuqtasi uchun bir xil va asosiy shrift o'lchamiga bog'liq.

7. Toza

Ta'rif keyinroq paydo bo'ladi

8. cswwardard-gridlar

Ta'rif keyinroq paydo bo'ladi

9. O'lik oddiy panjara

Ta'rif keyinroq paydo bo'ladi

10. Javob beruvchi Grid tizimi

Ta'rif keyinroq paydo bo'ladi

Hozirgi kunda har bir narsaning ramkalari bor va u bilan shug'ullanishingiz bilanoq, uning o'rnini boshqasi egallaydi. Bu, ayniqsa, javob beruvchi tarmoq uchun CSS ramkalariga taalluqlidir va har kim o'zini "eng yaxshi" deb ataydi. Ushbu ma'lumotning haddan tashqari yuklanishi chalkashlikka olib keladi.

Kelinglar, bir qadam orqaga chekinamiz, chuqur nafas olamiz va o'zimizga savol beraylik: biz haqiqatan ham barcha 24 variantni va "Ushbu eng zo'r ramka" taqdim etgan million kombinatsiyani ishlatamizmi? Ko'pincha biz istalgan vaqtda kengaytira oladigan kod bazasi bilan cheklangan miqdordagi o'zgarishlarga ega oddiy, moslashuvchan echimga muhtojmiz. Men har biri osonlikcha kengaytiriladigan CSS tarmoqlarini tatbiq etishning to'rtta texnikasi bilan o'rtoqlashmoqchiman. Ushbu to'rt usul:

1. №1 javob panjarasi tartibi (salbiy chekkalardan foydalangan holda)
2. Javob beruvchi tarmoq tartibi №2 (box-sizeing: border-box yordamida)
3. Jadvalni namoyish etishga asoslangan javob beruvchi panjara tartibi
4. Flexbox-ga asoslangan javob beruvchi panjara tartibi

Ushbu usullarning tavsifini soddalashtiraman va minimal va oddiy CSS miqdoridan foydalanaman. CodePen-da har bir usul uchun namoyish bo'ladi.

Umumiy CSS

Har bir usulga sho'ng'ishdan oldin, keling, barcha misollarda foydalanadigan umumiy uslublarni ko'rib chiqaylik. Hujjatdagi barcha elementlar uchun box-sizeing: border-box deklaratsiyasidan foydalanaman, shuningdek suzuvchi qutilarni tozalash uchun .clearfix sinfini qo'shaman. Mana bizning asosiy CSS:

/ * xususiyatlarini qayta o'rnatish * / *, *: oldin, *: keyin (box-sizeing: border-box;) .clearfix: after (tarkib: ""; displey: jadval; aniq: ikkalasi;)

1-usul: salbiy plomba vositasidan foydalanish

Ushbu usul bloklar orasidagi aniq oraliq bilan panjara bloklarini yaratish uchun salbiy chekkalarni ishlatishga asoslangan. Salbiy plomba kattaligi katakchaning panjaradagi holatidan farq qiladi va qutilar orasidagi masofa doimiy bo'lib qoladi. Keling, belgilanishni ko'rib chiqaylik:

/ * grid * / (margin-bottom: 20px;): last-child (margin-bottom: 0;) () @media all and (min-width: 768px) (/ * all cols margin * / (margin-right) : 20px;): last-child (margin-right: 0;) / * ustunlarni sezgir qilish * / .col-1-2 (float: left; width: 50%;) .col-1-4 (float: left ; kengligi: 25%;) .col-1-8 (float: chap; kengligi: 25%;) / * 2 oraliq qatorlar * / .row-2 (to'ldirish-chap: 20px;) .row-2: birinchi- bola (margin-left: -20px;) / * 4 oraliq qator * / .row-4 (padding-left: 60px;) .row-4: birinchi bola (margin-left: -60px;) / * 8 oraliq qatorlar * / .row-8 (padding-left: 60px;) .row-8: nth-child (4n + 1) (margin-left: -60px;) .row-8: nth-child (5n-1) (margin-right: 0;) .row-8: nth-child (6n-1) (aniq: ikkalasi;)) @media all va (min-width: 1200px) (/ * width * / .col-1 ni sozlash -8 (float: left; width: 12.5%;) / * 8 oraliq qatorlar * / .row-8 (padding-left: 140px;) / * bularni qayta o'rnatish ... * / .row-8: nth-child ( 4n + 1) (margin-left: 0;) .row-8: nth-chi ld (5n-1) (chekka-o'ng: 20px; ) .row-8: nth-child (6n-1) (aniq: yo'q;) / * va uni qo'shing * / .row-8: nth-child (1) (chekka-chap: -140px;))

Ko'rib turganingizdek, media-so'rov sharoitida belgilangan indent qiymati (uni x deb ataymiz) minus 1 (n-1) satr boshidagi ustunlar soniga ko'paytiriladi va bu chiziq chap chiziqqa qo'llaniladi. Har bir ustunda, oxirgisidan tashqari, belgilangan o'ng tomon chegarasi (x) mavjud. Va satrdagi birinchi ustun salbiy nentrga ega (n-1) * x

Kamchiliklari va xatolari

Ba'zi hisob-kitoblarga bo'lgan ehtiyoj, bundan tashqari, ustunlar sonining ko'payishi bilan usul amaliy emas. Bundan tashqari, qadamlar sonining ko'payishi bilan (media-so'rovlarning gradatsiya soni, masalan, har bir satrda 1 ta ustun, 4, 8 ...), biz CSS-ni qayta tiklashimiz kerak va biz juda ko'p matematik hisob-kitoblardan foydalanishimiz kerak.

Bizda juda ko'p suzuvchi elementlar bo'lganida yana bir qiziqarli xato paydo bo'ladi. Chiziqning umumiy miqdori bir nuqtada birlashtirilishi mumkin va elementlar o'tkaziladi yangi qator... Buni 8 ta ustunlar misolida ko'rish mumkin. Agar siz so'nggi media-so'rovning holatini minimal kengligi 1200px dan kichikroqqa o'zgartirsangiz, ushbu xatoni amalda ko'rishingiz mumkin. Buni eslang. Ammo bu usul ham o'zining afzalliklariga ega.

Foyda va amaliy foydalanish

Ushbu usulning haqiqiy go'zalligi sobit / o'zgaruvchan mash kombinatsiyalarini yaratishda yotadi. Misol tariqasida, o'zgarmaydigan kenglik asosiy tarkib maydoni va sobit kenglik qo'shimcha yon maydonni tasavvur qilaylik. Bizning HTML kodimiz shunday ko'rinishi mumkin:

Va CSS shunga o'xshash:

/ * markup * / .primary (margin-bottom: 20px;) @media all va (min-width: 600px) (.container (padding-right: 300px;) .primary (float: left; padding-right: 60px; kengligi: 100%;). ikkinchi darajali (float: right; margin-right: -300px; width: 300px;))

Va bu erda CodePen-da ishlaydigan kodning demolari:

2-usul: box-sizeing yordamida: border-box

Ushbu usul qutilar o'lchamlarini kuchidan to'liq foydalanadi: chegara qutisi. Ushbu xususiyat elementning umumiy kengligiga ta'sir qilmasdan elementga chekkalarni qo'shishga imkon berganligi sababli, biz hali ham sobit "to'ldirish" bilan moslashuvchan panjaraga erishishimiz mumkin. Ammo bu erda, margin xususiyatidan foydalanish o'rniga, biz panjara elementlari orasida to'ldirish vazifasini bajaradigan to'ldiruvchini ishlatamiz.

Belgilash:

Biz bu erda boshni aylantiradigan matematikani o'tkazib yubormoqchimiz, shuning uchun bizning CSS juda oddiy. Va bu erda 8 tagacha ustunlar mavjud:

/ * grid * / .row (margin: 0 -10px; margin-bottom: 20px;) .row: last-child (margin-bottom: 0;) (padding: 10px;) @media all and (min-width:). 600px) (.col-2-3 (suzuvchi: chap; kenglik: 66,66%;) .col-1-2 (suzuvchi: chap; kenglik: 50%;) .col-1-3 (suzuvchi: chap; kenglik: 33,33%;) .col-1-4 (suzuvchi: chap; kenglik: 25%;) .col-1-8 (suzuvchi: chap; kenglik: 12,5%;))

Ustun chegaralarini qoplash uchun har bir satr uchun salbiy chap va o'ng to'ldirish kerak. Media-so'rov tomonidan belgilangan minimal kenglikda bizning tarmoq elementlarimiz o'zlarining kengliklarini qabul qiladilar va konteynerlari ichida suzadilar. Siz ushbu kenglikni o'zingizning xohishingizga ko'ra o'zgartirishingiz yoki panjara elementlarining turli guruhlari uchun turli xil ommaviy axborot so'rovlarini belgilashingiz mumkin.

Ushbu usulni kengaytiramiz:

Aytaylik .col-8 elementlari avval har bir satrda 4 ga, so'ngra 8 ga bo'linishini xohlar edingiz. Buni ozgina o'ylab amalga oshirish juda oson. Yuqoridagi belgi uchun bizning CSS quyidagicha ko'rinadi:

@media all va (min-width: 600px) (.col-1-8 (float: left; width: 25%;) .col-1-8: nth-child (4n + 1) (aniq: ikkalasi;) ) @media all va (min-width: 960px) (.col-1-8 (width: 12,5%;) .col-1-8: nth-child (4n + 1) (aniq: yo'q;))

3-usul: jadval ekranidan foydalanish

Shu tarzda eski yaxshi jadval xatti-harakatlarini semantikani yoki tuzilmani buzmasdan amalga oshiradi. Ushbu usulda ko'rinadigan elementlar sukut bo'yicha blok sifatida ko'rsatiladi. Ammo ma'lum o'lchamlarda panjara qatorlari jadvalga, ustunlar esa jadval hujayralariga aylanadi. Keling, belgilanishni ko'rib chiqamiz - bu ikkinchi usulga o'xshaydi, ammo bu erda bizga aniq tuzatish kerak emas:

Va shunga ko'ra, CSS:

/ * grid * / .row (margin: 0 -10px; margin-bottom: 10px;) .row: last-child (margin-bottom: 0;) (padding: 10px;) @media all and (min-width:). 600px) (.row (displey: jadval; jadval tartibi: belgilangan; kenglik: 100%;) (displey: jadval-katak;) / * kol kengliklarini o'rnatish * / .col-2-3 (kenglik: 66,66%;) .col-1-2 (kengligi: 50%;) .col-1-3 (kengligi: 33,33%;) .col-1-4 (kengligi: 25%;) .col-1-8 (kengligi: 12,5%) ;))

Ushbu usul chalkash tuyulishi mumkin, ammo uning afzalliklari bor. Yangi boshlanuvchilar uchun biz an'anaviy jadvallar yordamida semantikani buzmaymiz va suzuvchi bloklarni tozalashimiz shart emas. Bir xil balandlikdagi ustunlar oson. Ruxsat etilgan ustunlar va o'zgaruvchan kenglik ustunlarining kombinatsiyasi? Muammo yo'q. Jadvaldagi displey o'z muammolarini taqdim etadi va to'rttadan ham bu mening eng sevimli narsam. Ba'zi hollarda bu yaxshi variant bo'lishiga qaramay.

4-usul: Flexbox

Men tavsiflaydigan oxirgi usul flexbox modulidan foydalanadi. MDN ma'lumotlariga ko'ra:

CSS3 moslashuvchan qutisi yoki flexbox - bu sahifadagi elementlarni turli xil ekran o'lchamlari va qurilmalari bo'ylab oldindan taxmin qilinadigan tarzda boshqarish uchun joylashtirishga imkon beradigan tartib tartibi.

Flexbox biz uchun juda ko'p turli xil variantlarni taklif etadi, bu biz uchun turli xil tartib variantlarining kuchli arsenalini beradi. Flexbox modulini sezgir qilish - bu pirojnoe. Oldingi kabi bizning belgilashimiz quyidagicha:

Endi yangi CSS-ni ko'rib chiqamiz:

/ * grid * / .row (displey: flex; flex-flow: satrlarni o'rash; margin: 0 -10px; margin-bottom: 10px;) .row: last-child (margin-bottom: 0;) (padding: 10px ; kengligi: 100%;) @media all va (min-width: 600px) (/ * o'rnatilgan kengliklarni * / .col-2-3 (kenglik: 66,66%;) .col-1-2 (kenglik: 50%) ;) .col-1-3 (kengligi: 33,33%;) .col-1-4 (kengligi: 25%;) .col-1-8 (kengligi: 12,5%;))

Bunday holda, qatorlar uchun displey xususiyatini moslashuvchan qilib o'rnatishingiz kerak, shuningdek egiluvchan oqim xususiyatini belgilashingiz kerak. Ushbu xususiyatlarning to'liq ta'riflari va tavsiflari flexbox uchun MDN hujjatlarida mavjud. Media so'rovi uchun biz faqat ustunlar kengligini o'zgartiramiz va flexbox biz uchun qolganini qiladi.

Xulosa

Biz javob beradigan CSS-tarmoqlarini yaratishning 4 ta usulini ko'rib chiqdik, ularning har biri o'ziga yarasha va kamchiliklarga ega. U yoki bu harakatni amalga oshirishning mutlaq usuli yo'q va men ko'pincha o'zimning bir yo'lim boshqasidan ko'ra yaxshiroq bo'lgan vaziyatlarga duch kelaman yoki men bir nechta variantlarni birlashtirishim kerak. 1 va 2-usullar mening sevimlilarimdir va men ularni o'z loyihalarimda tez-tez ishlatib turaman (1-uslub bo'yicha asosiy tartib va \u200b\u200b2-usul bo'yicha javob beruvchi tarmoqlar).

Avval aytib o'tganimizdek, uchinchi usul o'zining afzalliklariga ega, ammo men faqat jadvallar tartibidan qat'iy zarurat bo'lganda foydalanishni afzal ko'raman. 4-usul juda zo'r va men uni barcha loyihalarimga o'tkazadigan kunni ko'rish uchun sabrsizlik bilan kutaman. Flexbox tobora kuchayib bormoqda, ammo u faqat IE10 va undan yuqori versiyalarida qo'llab-quvvatlanadi. Buning uchun polyfills mavjud, ammo men ularsiz qilishni afzal ko'raman. Bugungi kunda fleksboksning ajoyib echimi bo'lishi mumkin bo'lgan senariylar mavjud (masalan, mobil brauzerlarIE bo'lmagan joyda).

Ushbu usullarning har biri osongina ölçeklenebilir va kengaytirilishi mumkin. Taqdim etilgan g'oyalardan foydalangan holda siz o'zingizning sezgir tartibingizni minimal CSS-ga ega bo'lgan panjara elementlari uchun kerakli joylashuv bilan osongina sozlashingiz mumkin. CSS panjara moduli yo'lda, ammo biz uni ishlatishdan biroz oldinroq bo'ladi. Umid qilamanki, sizga maqola yoqdi va endi CSS tarmoqlarini ishlatishdan qo'rqmaysiz.

Veb-saytlarni ishlab chiqish

Keyingi moslashuvchan tartibni kodlash vazifasi bilan duch keladigan har qanday dizaynerga katakchalar kerak. Ko'pgina hollarda yaxshi eski bootstrap olinadi va html-ke-da col-xs-6 col-sm-4 col-md-3 kabi sinflarga ega divlar paydo bo'ladi. Va hamma narsa yaxshi va tezkor bo'lib tuyuladi, ammo bu yondashuvda ko'pincha ko'plab tuzoqlar paydo bo'ladi. Ushbu maqolada biz ushbu tuzoqlarni ko'rib chiqamiz va chirigan pomidorlarni tashlaymiz, muammosiz to'rlar uchun mening hunarmandligimni ko'rib chiqing.

Muammolar

Maxsus mashlar

Shunday qilib, bizning dizaynerimiz juda oz vaqtga ega, maket yonmoqda, hamma narsani kecha qilish kerak. Shuning uchun u mashhur bootstrap CSS ramkasini asos qilib oladi va o'z ishini boshlaydi. Va keyin, ish o'rtasida u to'satdan "ketma-ket 5" bannerlar blokiga qoqilib tushadi. Bootstrap bilan ishlagan har bir kishi uning standart panjarasi 12x ekanligini biladi, shuning uchun standart bootstrap panjarasi bilan ketma-ket 5 ta ustun mumkin emas. Ha, albatta, siz bootstrap-da o'zboshimchalik bilan tarmoq yaratishingiz mumkin, ammo bu vaqtni sarflash, bog'liqliklarni yuklab olish, kamroq-ni yig'ish vaqti keldi (va biz, masalan, sass bilan yozamiz).

Maxsus katakchalar uchun kutubxonani qo'shsam bo'ladimi? Umuman olganda, bu yaxshi chiqish usuli, bu yondashuvning birdan-bir kamchiligi shundaki, ularning deyarli hammasi uzoq yoki zerikarli @media (min-width :) () yozish uchun mo'ljallangan yoki o'zlarining sinf majmualarini yaratadilar, ehtimol keraksiz kol15-xs- yakuniy CSS-ga kiritilgan ofset-3.

Shuning uchun, katta ehtimollik bilan, maket dizaynerlari barcha uslublarni qo'lda yozadi (asosan, u erda yozish uchun juda ko'p narsa yo'q).

Ko'pincha, standart bootstrap panjarasida qo'shimcha to'xtash nuqtalari yo'q, ya'ni xs, sm, md, lg mavjud - ularning hammasi kengligi 1200 pikselgacha. Ammo katta monitorlar haqida nima deyish mumkin? 1600 pikseldagi har qanday to'xtash nuqtasi xl faqat standart to'plamni so'raydi. Ammo yana, u mavjud emas va oldingi xatboshida bo'lgani kabi bir xil echimlar paydo bo'ladi. Lekin oxir-oqibat nazorat nuqtalari juda ko'p bo'lishi mumkin - 320, 360, 640, 768, 992, 1200, 1600, 1900 ..

Ortiqcha va ko'plik

Va bu erda biz muammosiz keyingi muammoga keldik. Tasavvur qiling, har bir panjara uchun o'zingizning blok o'lchamlarini yozishingiz kerak, shunda siz shunday narsalarni olasiz:

Bu juda ko'pmi? Mumkin bo'lgan tortish / surish va ko'rinadigan / yashirin joylarni qo'shing va keyin siz aqldan ozishni boshlashingiz mumkin. Ammo bu sinflarning barchasi CSS-da yozilgan, tasavvur qiling-a, 60 barobarlik katakning barcha kombinatsiyalari uchun CSS-da qancha sinf yozishingiz kerak!

Uslublarni belgilashdan ajratish

Har qanday tartib dizaynerlari ichki uslublar yomonligini bilishadi. Xo'sh, nima uchun biz markirovka mashg'ulotlarida uslublar yozyapmiz? col-xs-6, visible-sm va Xudo matnni o'ng tomonga taqiqlaydi - bularning barchasi uslublar, agar siz allaqachon cho'zilgan maketga tahrir kiritishingiz kerak bo'lsa, albatta, dizayner orqa paneldan col-sm- ni o'zgartirishni so'rashi kerak bo'lgan muammo bo'lishi mumkin. Col-sm-4 da 6.

Bir-biriga keraksiz uslublar

Ko'pincha, CSS ramkasi faqat katakchalar va bir nechta kichik funktsiyalar uchun bog'lanadi, bu keyinchalik uslublarning haddan tashqari qayta tiklanishiga va yakuniy CSSning ikki baravar hajmiga olib keladi. Masalan, butun bootstrap.min.css ulangan, keyin .btn, .form-control va shunga o'xshash narsalarning soyalari va yumaloq burchaklari quvnoq va quvnoq tarzda olib tashlanadi, jumladan: hover ,: focus ,: first-child. Natijada, yordam berish o'rniga, ramka to'sqinlik qiladi. .Glyphicon kabi ko'pincha keraksiz xususiyatlar haqida gapirmaslik kerak. Albatta, yana kerak bo'lgan narsadan bootstrap yaratishingiz mumkin, ammo bu yana vaqt.

Chet el standartlari va kod uslubi

Aytaylik, dizayner BEMni o'rganib chiqdi va undan foydalanishni boshladi. Ammo bootstrap-dan foydalanish zaruriyati o'ziga xos istisnolarni belgilaydi - undagi barcha sinflar BEM printsiplariga rioya qilmasdan, defis bilan yozilgan. Va bu erda tanlov muammosi paydo bo'ladi - yoki sinflar nomidagi tartibsizliklarga yo'l qo'ying (btn-blok o'chirilgan komponent__btn komponent__btn_disabled) yoki hali ham bootstrapni tashlaysiz.

Eskirgan usullar

Ma'lumki, bootstrap 3-dagi kataklar floats-ga asoslangan. Tez-tez muammolarni keltirib chiqaradigan narsa, eng keng tarqalgan narsalardan biri bu bloklarning balandligi, natijada chiroyli mash "sinadi". Floats-dan boshqa maqsadlarda foydalanishni to'xtating, flexbox-ni bilmaydigan barcha brauzerlar deyarli yo'q bo'lib ketgan!

Susi! bu chiqish yo'limi?

Yuqoridagi barcha muammolarning echimini izlayapman, men Syuzining ajoyib panjarasida bo'laman! , umuman olganda juda yaxshi. Lekin menga tezlik etishmadi, chunki susy! har bir to'xtash nuqtasi uchun ustunlarni alohida tavsiflashni taklif qildi:

.col (@media (min-width: 768px) (@include gallery (12 of 4);) @media (min-width: 1200px) (@include gallery (12 of 3);))

Ya'ni, susi! to'xtash nuqtalarini o'zingiz bajarasiz deb o'ylaydi. Bundan tashqari, susi! displeyni yozmaydi: egiluvchanlik, siz uchun chiziqlar, ularni o'zingiz yozishni unutmasligingiz kerak. Undagi ustunlar orasidagi chegaralar faqat nisbiy o'rnatiladi (piksel bilan o'rnatilishi u ishlamaydi). Bundan tashqari, u yaqinda egilishni o'rgandi va bundan oldin u suzuvchi va (nth-child ()) ustiga panjara qurdi. Umuman olganda, susi! bu yaxshi, lekin men barcha start nuqtalarida bo'lgani kabi barcha to'xtash nuqtalari uchun katakchalarni tasvirlash tezligi va osonligini xohlayman.

Boshqa tarmoq tizimlarini qidirish ham katta natija bermadi - hamma susy! Path-ga ergashib, to'xtash nuqtalarini unutib qo'yadi yoki bootstrap yo'lidan yurib, HTML-da mashlarni boshqarish uchun yaratilgan sinflar to'plamini taqdim etadi.

Velosiped binosi

Shunday qilib, o'zlariga xos bir narsa yozishga qaror qilindi, natijada tezkor tarmoq paydo bo'ldi. Bundan tashqari, susy kabi sass bilan qurilgan. Boshqa echimlar, xususan, susy bilan taqqoslaganda uning taqdim etadigan asosiy afzalliklari qanday? Avvalo, kamroq kod tufayli tezlik, standart bootstrap misolini olaylik:

Tez panjara bilan bunday panjara ta'riflash juda oson:

@import "~ tezkor-tezkor / tezkor-grid"; .row (@include grid-row ();) .col (@include grid-col (6 4 3 2);)

Keling, kamchiliklarimizni ko'rib chiqaylik va ushbu muammolarning barchasini tezkor tarmoq qanday hal qilishini ko'rib chiqaylik.

Maxsus mashlar

@import "~ tezkor-tezkor / tezkor-grid"; .cols ($ grid: (gap: 5px); @include grid-row ($ grid); & __ item (@include grid-col (12 6 null (5 of 1), $ grid);))

O'zingizning to'xtash nuqtalariga bo'lgan ehtiyoj

@import "~ tezkor-tezkor / tezkor-grid"; .cols ($ grid: (to'xtash nuqtalari: (xxs: 0px, xs: 360px, sm: 640px, md: 960px, lg: 1200px, xl: 1600px), ustunlar: 60); @include grid-row ($ grid); & __ item (@include grid-col ((xxs: 60, xs: 30, sm: 20, md: 15, lg: 12), $ grid);))

Ortiqcha va ravshanlik / Markup-dan ajratish uslublari

fast-grid - bu yaratilgan sinflar asosida html emas, CSS-da foydalanish uchun panjara doirasi. Bu markirovkani uslublardan ajratib turadi, bu kelajakda qo'llab-quvvatlash uchun foydalidir. Bundan tashqari, asosan foydalanilmaydigan yordamchi sinflar guruhini (.col-xs-push-4 va boshqalar) yaratish zaruriyati yo'q qilinadi.

Bir-biriga keraksiz uslublar

Fast-grid miksinlar to'plami bo'lganligi sababli, u o'z-o'zidan CSS-da hech qanday qoidalar yaratmaydi. Shuning uchun, bu erda siz ramka elementlarni keraksiz ravishda uslublar bilan bezashiga duch kelmaysiz. Yaxshiyamki, bu faqat panjara, boshqa hech narsa yo'q.

Chet el standartlari va kod uslubi

tezkor panjara - bu ichki ishlatishingiz kerak bo'lgan aralashmalar sizning sinflar, siz xohlagan ismlar bilan. Siz BEMni yoqtirasizmi? Muammo yo'q!

Eskirgan usullar

Flexbox sukut bo'yicha ishlatiladi, bu juda ko'p imkoniyatlarni ochadi va klassik suzuvchi muammolarni hal qiladi. Masalan, ustunlar tartibini osongina o'zgartirishingiz mumkin.

Quyidagi misolda biz asosiy tarkib ostidagi yon panelni namoyish etamiz mobil versiyava uni katta ekranlardagi birinchi blokga aylantiring.

Albatta, bunga float uchun pull / push yordamida erishish mumkin edi, ammo bu juda muhim.

Xulosa

Umuman olganda, men uchun qo'yilgan vazifa bajarildi - endi tarmoqlar endi men uchun hech qanday muammo tug'dirmaydi va maket tez va oson. Omborda tezkor grid imkoniyatlari haqida ko'proq ma'lumot olishingiz va misollarni ko'rishingiz mumkin:

Siz hali ham bootstrap-dan foydalanayapsizmi? Keyin biz sizga boramiz!

Teglar:

• cSS
• sass
• panjara

Teglar qo'shing