Dificultatea utilizării mai multor coloane în proiectare este cauzată numai de faptul că nu putem controla dimensiunea documentului. În această lecție vă voi arăta cum să creați un șablon adaptiv cu mai multe coloane care să arate excelent pe diferite dimensiuni ale ecranului. Începem cu elementele de bază și trecem treptat la lucruri mai complexe.
Suport în browsere
Suportul pentru o structură multi-coloană este excelentă dacă nu sunteți împotriva prefixelor furnizorilor. Potrivit statisticilor Pot folosi această funcție este acceptată în 95,32% din browsere. Mai multe browsere, cum ar fi IE10 +, Edge și Opera Mini, suportă pe deplin dispozitivele cu mai multe coloane. Alte browsere, cum ar fi Firefox și Chrome, au nevoie de prefixe.
Dacă susțineți browserele mai vechi, veți avea nevoie de vechiul polifil vechi (IE9 și de mai jos). Dacă browserul nu suportă mai multe coloane, atunci, conform tehnicii de degradare grațioasă, aspectul va fi reconstruit într-o singură coloană. În acest caz, polifile poate să nu fie cea mai bună opțiune.
Modulul CSS cu mai multe coloane are multe proprietăți diferite. În partea următoare, voi vorbi despre fiecare dintre ele separat.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Numărarea coloanelor și lățimea coloanei
Proprietatea numărului de coloane specifică numărul de coloane pentru element. Acceptat fie întregi pozitive, fie auto. Dacă setați automat, numărul coloanelor va fi determinat din lățimea coloanei de valoare. Dacă specificați un număr întreg pozitiv, toate coloanele vor avea aceeași lățime.
Proprietatea lățimii coloanei specifică lățimea coloanelor individuale ale elementului. Proprietatea nu este strictă. De exemplu, coloanele vor fi puțin mai înguste decât valoarea dată, dacă spațiul nu este suficient. Această proprietate preia și valori auto sau numere întregi pozitive. Dacă setați automat, lățimea va fi determinată de proprietatea numărului de coloane. Spațiul liber va fi distribuit între toate coloanele la un nivel.
De asemenea, puteți seta ambele valori în același timp cu proprietatea coloanelor abreviate. Sintaxa proprietății coloanelor este:
După cum puteți vedea, primul exemplu de coloane este un al patrulea scurt, iar al doilea exemplu este o treime redusă. De fapt, dacă un număr întreg nu are o unitate de măsură, atunci valoarea se referă la numărul de coloane. CodePen demonstrează un demo cu toate proprietățile exprimate. Dacă redimensionați fereastra, puteți vedea:
Proprietatea numărului de coloane acceptă întotdeauna numărul de coloane pe care le specificați. Doar lățimea lor se schimbă.
Proprietatea lățimii coloanelor modifică automat numărul de coloane pe baza spațiului liber. Numărul de coloane este setat astfel încât lățimea lor să fie mai mare decât lățimea specificată. De asemenea, dacă spațiul nu este suficient, lățimea tuturor coloanelor poate fi puțin mai mică decât lățimea specificată.
Proprietatea coloanelor utilizează numărul de coloane ca număr maxim de coloane permise. Lățimea coloanelor va fi în continuare ajustată astfel încât numărul de coloane să nu depășească niciodată numărul de coloane specificate, iar lățimea coloanei va fi aproximativ egală cu lățimea specificată.
Coloana Gap și regula coloanei
Folosind spațiul dintre coloane, puteți specifica spațiul dintre coloane. Valorile normale sau numerice sunt acceptate. Puteți seta 0, dar nu negativ. Dacă este specificată normală, se va utiliza valoarea implicită din browser pentru distanța dintre coloane.
coloana este o scurtătură pe care o puteți utiliza pentru a adăuga o linie între două coloane. Aceasta este aceeași cu proprietatea de frontieră-stânga sau de frontieră. Sintaxa proprietatii:
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Proprietatea pentru lățimea regulii coloanei poate fi setată la o lățime de 3px sau cuvintele cheie subțiri, medii sau groase. coloana-stil-stil ia valori de tip punctat, punctat, solid, etc Toate valorile proprietății în stil de frontieră pot fi aplicate stilului cu reguli în coloană, iar valoarea culorii regulilor de coloană poate fi orice formă validă de înregistrare a culorilor. CodePen demonstrează un demo al celor două proprietăți.
Coloana de umplere și coloana Span
Proprietatea coloană-umplere specifică modul în care conținutul va fi distribuit astfel încât să umple coloanele. Proprietatea ia valorile auto și balanța, coloanele sunt completate secvențial. Dacă specificați soldul, conținutul este distribuit uniform în toate coloanele.
Trebuie să se ia în considerare numai faptul că, dacă setați o înălțime fixă a coloanelor, Firefox echilibrează automat conținutul. În alte browsere, conținutul va fi completat secvențial.
Proprietatea span coloane controlează modul în care elementul se va întinde pe toate coloanele. Are două valori posibile: toate și nici una. Dacă specificați toate, elementul este întins la toate coloanele. Proprietatea nu este acceptată în Firefox.
CodePen demonstrează demo-ul. care arată modul în care cotația este întinsă la toate coloanele. În Firefox, citatul este localizat în coloana centrală, care poate fi considerată o folbeck acceptabilă.
Cum se creează un aspect adaptabil cu mai multe coloane
Acum, că ați aflat despre diferitele proprietăți și semnificațiile lor, să facem șablonul nostru adaptabil și ușor de utilizat.
Proprietățile coloanelor și lățimii coloanelor au propriile lor probleme. Proprietatea numărului de coloane acceptă numărul dorit de coloane pe ecrane mari de dispozitive, dar aspectul poate fi presărat pe ecrane mici. Un principiu similar este pentru lățimea coloanei, care nu oferă coloane prea înguste pe ecrane mici, dar pe ecrane mari dă prea multe coloane.
Pentru a face aspectul să arate bine pe toate ecrane, trebuie să setați atât proprietăți, număr de coloane și lățime a coloanei. Deci, puteți controla lățimea și numărul de coloane. Va trebui să remediați câteva probleme, vom vorbi despre ele chiar mai jos.
Corectarea derulării orizontale
Dacă înălțimea coloanelor este fixă și fereastra browserului este redusă, apare o parcurgere orizontală. Deoarece conținutul nu se poate extinde pe verticală, el o va face orizontal. Pentru a remedia această problemă, trebuie să modificați lățimea ferestrei browserului până când apare o defilare orizontală. Apoi, folosind interogările media, trebuie să setați înălțimea coloanei în auto pentru a o face mai mică decât lățimea. cod:
Demo CodePen arată atât problemele cât și soluțiile posibile. Modificați mărimea ferestrei browserului pentru a vedea cum funcționează ambele exemple.
Fixați coloane foarte lungi
Dacă difuzoarele devin prea lungi, utilizatorii se vor plictisi să le răstoarne în sus și în jos. Când înălțimea coloanelor devine mai mare decât înălțimea ferestrei browserului, este mai bine să scăpați de mai multe coloane și să lăsați unul. Puteți face din nou cu ajutorul interogărilor media:
concluzie
Sper ca această introducere în modulul CSS cu mai multe coloane să vă fi introdus proprietățile sale. Aceste proprietăți pot fi un plus excelent pentru bancul dvs. de porci în design adaptiv. Și dacă mai suportați browsere mai vechi, mai multe coloane sunt perfect transformate într-o singură tehnică de degradare grațioasă.
Ediție: Comanda webformself.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Practicați HTML5 și CSS3 de la zero la rezultatul!
Articole similare
-
Căutarea ajutorului pentru a plăti pentru chirurgie plastică - ajutați-vă cu banii
-
Este posibilă îmbunătățirea vederii cu gimnastica pentru ochi?
Trimiteți-le prietenilor: