Tarkib
- O'qituvchiga hamroh bo'lish uchun ushbu videoni tomosha qiling ...
- Qattiq asos
- Turli xil tartib variantlari
- Suzib yuradi
- Suzib qo'yishning afzalliklari
- Suzuvchi bilan bog'liq muammolar
- displey: jadval katakchasi
- Displeyning afzalliklari: stol xujayrasi
- Ko'rsatish bilan bog'liq muammolar: jadval katakchasi
- matnni tekislash: oqlash
- Matnni tekislashning afzalliklari: asoslash
- Matnni tekislash bilan bog'liq muammolar: asoslash
- Flexbox
- Flexbox-ning afzalliklari
- Flexbox bilan bog'liq muammolar
- Kelajakka qarab: Grid andozalari maketlari
- O'rganilgan boshqa saboqlar
- qutining o'lchamlari: chegara qutisi
- CSS3 hisoblash funktsiyasi
- JavaScript-dagi media-so'rovlar
Siz qaror qildingiz. Siz sho'ng'in qilyapsiz. Siz m-nuqta yo'naltirishlari, turli xil qurilmalar uchun alohida tarkib va yangi qurilmalardagi buzilgan tarkibni tuzatish uchun doimiy yangilanishlar bilan ish olib borasiz. Bu sezgir yoki büst. HTML va CSS-ning birinchi biti sahifada bo'lganidan keyin nima bo'ladi? Agar A rejasi ishlamasa nima bo'ladi?
Men o'zimning birinchi javob beradigan veb-saytimni 2011 yil oktyabr oyida ishga tushirdim va shu vaqtdan beri 20 dan oshiq saytni ochdim. Ularning birortasi ham rejaga muvofiq ketmagan. Ularning har biri menga topshiriqni bajarish uchun ikkita (yoki hatto uchta) usulni bilishni talab qildilar. To'liq asbob kamariga ega bo'lish juda muhim, shuning uchun sizning B, C va ehtimol D rejangiz sizning javob beradigan veb-dizayn tartibingiz uchun nima bo'lishi mumkinligini ko'rib chiqamiz.
O'qituvchiga hamroh bo'lish uchun ushbu videoni tomosha qiling ...
Qattiq asos
Net o'quvchilari sifatida, sizga bu haqda ko'p marotaba aytilganiga aminman, lekin men Ethan Marcottening ushbu mavzuga bag'ishlangan "Responsive Web Design" fantastik kitobini olishni taklif qilaman. U buni 70 sahifada tushuntirib berishni men qilgan 2000 dan ko'ra yaxshiroq ishladi. Agar sezgir dizayn tushunchasi siz uchun yangi yoki noaniq bo'lsa, bu erda tezkor obzor. Barcha yaxshi javob beradigan dizaynlar quyidagi uchta asosiy qismdan iborat:
- Moslashuvchan kataklar
- Moslashuvchan media
- Tartibni belgilaydigan media-so'rovlar
Haqiqatan ham ajoyib bo'lishdan tashqari, bu saytni loyihalashtirishning eng yaxshi usuli bo'lgan sezgir dizayn uchun juda muhim holatlar mavjud. Xo'sh, biz qayerdan bilamiz?
Internetdan foydalanish tez va tezkor ravishda mobilga yo'naltirilgan. Google saytlarni sezgir bo'lishini afzal ko'radi. Tezkor qayta ishlash sezilarli daromad va konvertatsiya reytinglariga olib keladi va bitta sayt tarkibini boshqarish ikki, uch yoki undan ko'pini boshqarishga qaraganda ancha sodda. Oxir oqibat, sezgir dizayn ajoyibdir. Lekin siz buni bilasiz. Shunday qilib, keling, yoqimli narsalardan voz kechamiz va shu bilan davom etamiz.
Turli xil tartib variantlari
Vaziyatga qarab, sizning sezgir dizayningizni kodlash uchun foydalanishingiz mumkin bo'lgan bir nechta kuchli vositalar mavjud. Har bir vosita har qanday vaziyatga mos kelmaydi, shuning uchun ushbu usullarning har birini qachon va qanday ishlatishni bilish veb-saytlaringizni yaxshilaydi.
Suzib yuradi
Boshqa variantlarim bo'lsa ham, javob beradigan saytni yaratish usullari ro'yxatida hali ham suzuvchi birinchi o'rinda turadi. Ular shunchaki oson va juda ko'p brauzerlarda ishlashadi, avval boshqa joylarni qidirishadi.
Suzib qo'yishning afzalliklari
- Qatorga o'ralgan tarkibni juda oson qiling
- Ustunlarning chap va o'ng tomonlarini idishga osongina tekislang
- Bilan suzuvchi elementlarning tartibini o'zgartirish qobiliyati suzuvchi: o'ng yoki suzuvchi: chap
- Barcha brauzerlarda to'liq qo'llab-quvvatlanadi
Suzuvchi bilan bog'liq muammolar
- Suzuvchi elementlar nisbiy balandlikni sharaflamaydi
- Kontent oqimini saqlash uchun clearfix CSS-ni talab qiladi
- Hizalamalarni sozlash uchun katta miqdordagi CSS talab qilinadi
Umuman olganda, suzuvchi vositalar - bu amalga oshiriladigan eng oddiy sezgir tartiblardan biridir. Ular abadiy atrofida edilar va biz hammamiz ularni bilamiz. Ammo, albatta, boshqa tartib usullarini talab qiladigan holatlar mavjud, bunda: l Siz bir xil balandlikdagi tarkibga ega bo'lgan bir nechta ustunlarni talab qilasiz. l Tarkib bir qator ichida bo'lganida vertikal ravishda markazlashtirilishi kerak.
Siz duch keladigan har qanday muammolarni hal qilish uchun foydalanishingiz mumkin bo'lgan ba'zi boshqa tartib usullarini ko'rib chiqamiz.
displey: jadval katakchasi
Vaqti-vaqti bilan siz ba'zi tarkibni vertikal ravishda tekislashingiz kerak. Qatordagi har bir ustun bir xil balandlikda bo'lishi kerak bo'lgan boshqa holatlar mavjud. Ushbu holatlar jadvallar mening maketlarim qutisini to'liq tark etmaganligining sababi. CSS bizga elementlar to'plamini jadval yordamida yaratish imkoniyatini beradi displey: jadval va displey: jadval katakchasi.
.parent {display: table; } .child {display: table-cell; vertikal-tekislash: o'rta; }
Ushbu usul ajoyib.Men CSS jadvali bo'lsa ham, tarkibni joylashtirish uchun jadvallardan foydalanib, o'zimni harom va nostaljik his qilyapman, lekin u bilan birga keladigan mayda bezovtaliklarga dosh berishga tayyor bo'lsangiz, bu juda qulaydir.
Displeyning afzalliklari: stol xujayrasi
- Tarkibning har bir ustuni bir xil balandlikka ega
- vertikal-tekislash: o'rtada
- Barcha zamonaviy brauzerlarda to'liq qo'llab-quvvatlanadi
Ko'rsatish bilan bog'liq muammolar: jadval katakchasi
- Jadvallarda bo'lgani kabi, katak kengliklari ham bu taklif (ular eng keng tarkibga qadar kengayadi)
- Siz katakchalarni o'rashingiz mumkin emas
- Qo'shimcha belgini qo'shishingiz kerak bo'lishi mumkin (ota-ona div bilan displey: jadval)
Agar to'g'ri ishlatilsa, displey: jadval katakchasi suzuvchi elementlardan foydalangan holda sahifani joylashtirish bilan bog'liq ko'plab muammolarni hal qiladi. Albatta, maketga nisbatan o'ziga xos yondoshishni talab qilishi mumkin bo'lgan boshqa holatlar ham mavjud.
matnni tekislash: oqlash
Biz hammamiz u erda bo'ldik: tarmoqdagi 30 ta bir xil o'lchamdagi blok elementlarini moslashtiradigan tartibni istagan mijoz. Ehtimol, bu rasmlar, video yoki mahsulot tavsiflari edi. Shuningdek, ular chap va o'ng elementlarning yuqoridagi tarkibga mos kelishini xohlashdi.
Bu bajarilishi mumkin, lekin displey: jadval katakchasi bu imkoniyat emas, chunki u o'rashga imkon bermaydi va suzuvchi elementlar 3n + 3, 4n + elementlaridagi har bir to'xtash nuqtasida chekkalarni ishlaganda deyarli CSS talab qilinadi. 4, 5n + 5 va boshqalar.
Ushbu holat men birinchi marta Patrik Kunka tomonidan "Matn-align: Justify and RWD" deb nomlangan postda o'qigan uslubim uchun yaratilgan bo'lib, bu mening maketlar vositamning asosiy qismiga aylandi: yordamida matnni tekislash: oqlash panjara ustida. Buni qilish juda oddiy, kod barcha zamonaviy brauzerlarda yaxshi qo'llab-quvvatlanadi va u yaratadigan maketlar qat'iydir.
.grid {text-align: oqlash; } .grid-item {display: inline-block; kengligi: 22,5%; matn bilan tekislash: chapga; vertikal-tekislash: tepa; margin-bottom: 3.333333333333333%; } .grid-item :: {content: ’’ dan keyin; displey: inline-blok; kengligi: 100%; } .grid-item-extra {display: inline-block; chegara: 0; margin: 0; }
Bilan bog'liq ba'zi gotchalar mavjud displey: inlineblock. Eng katta muammo bu qo'shimcha belgilashga ehtiyoj. Chunki matnni tekislash: oqlash oxirgi satrdagi so'nggi katakchani o'ng tomonga tekislaydi, ushbu satrdagi har qanday element soni maksimaldan kam bo'lsa, ushbu satr chegaralarida bo'sh joy qoladi. Ushbu qatorni to'ldiradigan qo'shimcha divlarni qo'shish (a bilan balandligi: 0) bu muammoni hal qiladi. The :: keyin pseudo-element griditemalarning so'nggi qatori oxirgi haqiqiy qator emasligini ta'minlaydi va shuning uchun grid-elementlarni to'g'ri asoslaydi.
Kunka o'z lavozimida jarayonni tasavvur qilishda juda yaxshi ishlaydi, shuning uchun imkoniyat bo'lganida uni tekshirishni taklif qilaman. Xulosa qilish uchun:
Matnni tekislashning afzalliklari: asoslash
- Elementlar o'rtasida hisoblash chegaralari yo'q
- Elementlarning uzun ro'yxatlaridagi chiziqlarni oson o'rash
- Chap, o'ng va yuqori tomonlarni tekislang
- IE8 + va barcha zamonaviy brauzerlarda qo'llab-quvvatlanadi
Matnni tekislash bilan bog'liq muammolar: asoslash
- Texnika qo'shimcha belgilanishni talab qiladi
- Tipografik "muammolar" inline-blokdan kelib chiqadi
Ushbu muammolarni shunchalik katta bo'lganki, men ushbu tartib texnikasidan voz kechishga arziydigan vaziyatni hali topmadim. Bu toza belgi nomidan e'tiborsiz qoldirish juda kuchli. Mediya so'rovlari ichidagi kenglik va chekka xususiyatlarining oddiy o'zgarishi hayratlanarli darajada moslashuvchan panjara sxemalarini yaratadi:
.grid-item {width: 48%; } @media faqat ekran va (min-width: 48em) {.grid-item {width: 31%; }} faqat mediya ekrani va (min-width: 64em) {.grid-item {width: 22%; }} faqat mediya ekrani va (min-width: 80em) {.grid-item {width: 12%; }}
Hozirgacha biz suzuvchi narsalarni yopdik, displey: jadval katakchasiva matnni tekislash: oqlash. Ammo ularning barchasi qanchalik foydali bo'lsa ham, ular ishlamaydigan va ishlamaydigan holatlar mavjud va ko'pincha buzilgan maketlarni tuzatishga uch soat sarf qilmaguningizcha buni aniqlash qiyin. Hozirda mavjud bo'lgan, ko'pgina brauzerlarga mos keladigan to'rtinchi tartib usuli bor va bu mening dizaynimni tuzishdagi eng sevimli usulim.
Flexbox
Yaqinda Erik Meyer o'z tvitterida: "Buni shuni aytishga ijozat bering: siz CSS fleksbokslari haqida qanchalik hayajonlansangiz ham, men sizni hech qayerda etarlicha hayajonlanmaganiga ishonishga tayyorman" deb yozdi. Men u bilan ko'proq kelisha olmadim. Har safar men yana qanday tartib bilan bog'liq muammoga duch kelganimda, uni qanday hal qilishni bilmayman, tuzatish odatda "funktsional" nosozlik bilan Flexbox-ga asoslangan echimdir.
Men bu erda Flexbox-ga to'xtalaman, ammo bu erda Stiven Xey tomonidan yozilgan Flexbox-ning hayoliy yurishi, shuning uchun uni o'tkazib yubormaganingizni tekshirib ko'ring.
Flexbox-ning afzalliklari
- Uni olganingizdan so'ng, Flexbox uchun CSS yozish oson
- Bu juda moslashuvchan. Siz deyarli hamma narsani qilishingiz mumkin
- Birinchi marta biz Flexbox bilan haqiqiy vertikal va gorizontal markazlashtiramiz (margin: auto)
Flexbox bilan bog'liq muammolar
- Shu nuqtada siz juda xilma-xil xususiyatlar to'plamiga ega bo'lgan uch xil sintaksisni yozishingiz kerak
- Hozirda u faqat IE10 +, Chrome va Safari-da qo'llab-quvvatlanadi (va Firefox-da qisman qo'llab-quvvatlash)
Ba'zi bir brauzerlarning Flexbox-ni to'g'ri ishlashga qodir emasligi bilan shug'ullanish uchun Modernizr-ni o'z ichiga olgan avtoulov rejasi va hech bo'lmaganda bitta yuqorida ko'rsatilgan tartib usulidan foydalanish kerak. Shuni esda tutingki, ushbu maqoladan boshlab, Firefox-dagi Modernizr Flexbox-ni qo'llab-quvvatlash testida noto'g'ri qaytaradi, chunki u qo'llab-quvvatlamaydi egiluvchan o'rash, ammo jamoa buni o'zgartirmoqchi.
Kelajakka qarab: Grid andozalari maketlari
Flexbox kabi ajoyib va qudratli bo'lib, u bugungi kun tartibini bajarish uchun juda ko'p ishlangan. Agar siz o'zingizning blogingiz uchun asosiy sezgir tartibni yoki uchta ustunli uy sahifasini qidirsangiz, Flexbox-ning barcha qobiliyatlari va murakkabligi sizning qo'lingizda bo'lishi juda ko'p bo'lishi mumkin. Yangi CSS3 Grid Layout Andozasini kiriting.
W3C orqali ishlaydigan ushbu noma'lum modul endi brauzerning haqiqiy qo'llab-quvvatlashiga ega emas. (IE11 qo'llab-quvvatlashi murakkab va qiziq bo'lmagan qism bilan cheklangan.) Agar siz uning sahifasini ko'rib chiqsangiz caniuse.com, qo'llab-quvvatlanmaydigan brauzerlarning aksariyat qismi biroz tushkunlikka tushadi. Ammo u kelganda, bu hayratlanarli darajada sodda bo'ladi, ayniqsa, dizaynerlar uchun vizual maketlar g'oyasini efir kodlari tartibidan ko'ra qulayroq.
.head {flow: 'a'; } .main {flow: 'b'; } .sidebar {oqim: 'c'; } .footer {flow: 'd'; } tanasi {displey: 'a' 'b' 'c' 'd'; } @media faqat ekran va (min-width: 48em) {body {display: 'aaa' 'bbc' 'ddd'; }}
Yaqinda yangi boshlovchi dasturchi uchun "bbb" tartibini "bbc" ga o'zgartirib, sahifa tartibini tezda o'zgartirish juda oson bo'ladi. Bu haqiqiy taraqqiyot.
O'rganilgan boshqa saboqlar
Ba'zida sezgir dizaynni yaxshi ishlashi uchun yaxshi tartib strategiyasidan ko'proq narsa talab etiladi. So'nggi bir necha yil ichida menga haqiqatan ham yordam bergan bir nechta fokuslarni o'rgandim. Odamlar mendan yordam so'rashganda, men har doim bu nisbatan oddiy tushunchalarni bilmaydigan odamlar sonidan hayratlanaman. Agar siz ularni bilsangiz, ajoyib! Ularga e'tibor bermang va ushbu maqolani kichik devingizga topshiring. Agar siz ularni bilmasangiz, uni o'qing va o'zingizni ko'rsatgandek tuting (keyinroq menga minnatdorchilik bildirishingiz mumkin).
qutining o'lchamlari: chegara qutisi
Bunga qarang:
*, * :: oldin, * :: {box-sizeing: border-box; }
IE8 orqali to'liq qo'llab-quvvatlanadigan ushbu oddiy qoida (bilan -moz- va -webkit- prefikslar) brauzerga sukut bo'yicha tarkibni emas, balki elementning kengligini, uning to'ldirilishini va chegarasini hisobga olgan holda hisoblashini aytadi. Kengligi: 50% haqiqatan ham 50%, hatto plomba va chegara bilan ham, bu juda ko'p ishlab chiqaruvchilar suyuqlik o'lchamidagi elementlarni to'ldirish va chegara bilan suzishda muammolarni hal qiladi.
CSS3 hisoblash funktsiyasi
Yordamida qiymatlarni hisoblash kaltsiy () CSS-dagi funktsiya - bu mening javob beradigan eng sevimli fokuslarimdan biri. Kengligi: 70% va kengligi: 30% oson, lekin agar siz ikkita ustunning birida statik kenglikni xohlasangiz nima bo'ladi?
Kengligi: 70% va kengligi: 200 piksel deyarli deyarli ishlamaydi. Bu erda kaltsiy () Ushbu CSS funktsiyasi sizga ikki xil o'lchov yordamida o'lchov yordamida qiymatni hisoblash imkoniyatini beradi.
Masalan:
.content {width: calc (100% - 220px); } .sidebar {kenglik: 200px; }
JavaScript-dagi media-so'rovlar
Agar siz JavaScript-dagi hodisani boshlash uchun ekran kengligidan foydalansangiz va uni sizning to'xtash nuqtangiz bilan bir xil kenglikda amalga oshirishingiz kerak bo'lsa, $ (window) .width () yoki window.outer Width brauzerlarda noto'g'ri va nomuvofiqdir. Agar siz ba'zi bir JavaScript-ni ekran o'lchamiga qarab o'chirmoqchi bo'lsangiz, bu kengliklarga bemalol ishonishingiz mumkin emas, chunki ular ommaviy axborot so'rovlari uchun ishlatiladigan CSS o'lchovlariga juda kam mos keladi. Agar siz media-so'rovlaringizda ems-dan foydalansangiz, bu nomuvofiqliklar yanada kuchayadi.
Zamonaviy brauzerlar va IE10 + bizga window.matchMedia () funktsiya. Bu bitta parametrni talab qiladi, media-so'rov va media-so'rovga mos keladimi-yo'qligini ko'rsatadigan mantiqiy qiymatni qaytaradi. Agar siz eski brauzerdan foydalansangiz, Modernizr xuddi shu tarzda ishlatilishi mumkin bo'lgan .mq testini taklif qiladi, ammo IE9 dan tashqari versiyalarda xatolikka yo'l qo'ymaydi.
agar (window.matchMedia ("(min-width: 48em) and (max-width: 64em)". match)) {/ * 48em viewport width 64em * /} else {/ * 48em> viewport width or viewport width> 64em * /} if (Modernizr.mq ("(min-width: 48em) and (max-width: 64em)")) {...}
Ushbu maqolani o'qish uchun vaqt ajratganingiz uchun tashakkur. Umid qilamanki, bu sizning sezgir dizayningiz uchun asboblar qutisini kengaytirdi yoki hech bo'lmaganda buni to'g'ri bajarayotganingizni tasdiqladi.
So'zlar: Josh Broton
Ushbu maqola dastlab to'r jurnalining 250-sonida paydo bo'ldi.
