În sfatul de astăzi rapid, vom învăța cum să construim planuri receptive utilizând floare CSS, o metodă veche și încă de încredere. Cu ce am făcut, vom vedea cum bootstrap se ocupă de lucruri. Plutitoarele nu au fost inițial concepute pentru a forma baza structurii paginii (standardele CSS mai noi, cum ar fi flexbox și grilă scopul de a aborda acest lucru), lucru de lucru cu flotoare poate fi, uneori, dificil. Să examinăm un exemplu care să ilustreze acest lucru.
Construirea unui aspect responsabil
Să presupunem că vrem să construim această dispunere a cărților:
Verificați versiunea de dimensiune completă pentru o idee mai clară.
Stiluri de bază
Pentru aceste carduri, nu dorim să setăm o înălțime fixă pentru subtitrări. Nici nu vrem ca ei să fie lățime fixă. Prin urmare, pentru a menține cardurile utilizabile, astfel încât acestea să nu squash prea mult, avem nevoie pentru a afișa un număr diferit de coloane, în funcție de mărimea ferestrei de vedere.
Am creat câteva interogări media, astfel încât următoarele să fie adevărate:
viewport
Numărul de coloane
<400px
1
≥400px
2
≥768px
3
≥1024px
4
Iată marcajul; lista elementelor care conțin imagini și legende în elementele figurative:
Unele descrieri aici
Iată CSS-ul pentru stilul respectiv:
/ * stiluri stilistice * / corp lățime: 80%; max-lățime: 1200px; margine: 40 pixeli auto; font: normal 14px / 1.5 "Montserrat", "Helvetica Neue", sans-serif; fundal: # cfd8dc; culoare: # 37474f; figura background: whitesmoke; margine: 0 0 40px; box-shadow: 0px 2px 4px rgba (0,0,0,0,2); figcaption padding: 20px; img max-lățime: 100%; înălțime: auto; afișare: bloc; .clearfix: după content: ""; afișare: tabel; clar: ambele; ul margine: 0; umplutura: 0; / * stiluri structurale * / li tip-style-list: none; plutește la stânga; padding-left: 15px; umplutură-dreapta: 15px; box-size: caseta de margine; / * interogări media * / ecranul @media și (min-width: 400px) li lățime: 50%; ecranul @media și (min-width: 768px) li width: 33.333%; ecranul @media și (min-width: 1024px) li width: 25%;
Veți observa interogările media din partea de jos, care dictează cât de largi sunt cardurile la anumite ferestre de vizualizare. Iată ce ne dă:
Problema cu această structură fluidă este totuși faptul că, prin eliminarea fiecărui rând nou, unele cărți se blochează atunci când încearcă să-și găsească drumul înapoi spre stânga.
Identificarea cardurilor pentru ștergere
În conformitate cu exemplul de mai sus, atunci când rândul conține patru cărți, trebuie să ștergem al cincilea, apoi al nouălea și așa mai departe. Pentru a realiza acest lucru, folosim : Nth-de-tip (un + b) CSS pseudo-clasa în cazul în care un b + parametru reprezintă modelul repetat dorit. De exemplu, pe ecrane mari (adică ≥1024 pixeli), le folosim 4n + 1. Această formulă găsește fiecare element care este un factor de patru, apoi selectează Următor → unu.
Iată cum am putea schimba interogările noastre media pentru a modifica cardurile care sunt șterse:
viewport
Numărul de coloane
Modelul repetat
<400px
1
-
≥400px
2
2n + 1
≥768px
3
3n + 1
≥1024px
4
4n + 1
Și iată CSS care reușește acest lucru. Rețineți că interogările noastre media sunt cumulative, așa că trebuie să resetăm cardul de compensare anterior de fiecare dată când definim unul nou:
Ecranul @media și (min-width: 400px) li lățime: 50%; li: nth-of-type (2n + 1) clar: stânga; ecranul @media și (min-width: 768px) li width: 33.333%; li: nth-of-type (2n + 1) clar: nici unul; li: n-a-tip (3n + 1) clar: stânga; ecranul @media și (min-width: 1024px) li width: 25%; li: nth-of-type (3n + 1) clar: nici unul; li: nth-of-type (4n + 1) clar: stânga;
În cele din urmă, merită amintite următoarele lucruri:
In loc de clar: stânga valoarea de proprietate ar fi putut fi folosită în mod egal cu cele mai generice clar: ambele Valoarea proprietății.
In loc de : Nth-de-tip (un + b) CSS pseudo-clasă am putea folosi în mod egal : Nth-copil (un + b) pseudo-clasă.
Acum că am discutat despre o metodă de curățare a flotorilor, pentru a ne lărgi cunoștințele, să aruncăm o privire la abordarea lui Bootstrap.
Utilizând metoda Bootstrap
Profitând de sistemul de grilă Bootstrap, vom putea construi un aspect receptiv similar celui anterior. Din nou, în funcție de mărimea ferestrei de vedere, aspectul nostru se va schimba:
viewport
Numărul de coloane
<768px
2
≥768px
3
≥992px
3
≥1200px
4
Iată HTML-ul necesar, care precizează că elementele din listă umple șase din cele douăsprezece coloane pe extraopțiuni mici, patru coloane pe mici și apoi trei coloane pe ferestrele mari de vizualizare:
Unele descrieri aici
În mod normal, acest marcaj este tot ceea ce avem nevoie, presupunând că toate coloanele au înălțimi egale. Cu toate acestea, în exemplul nostru coloanele au înălțimi diferite, deci va trebui să ștergem flotoarele. Pentru a face acest lucru, vom folosi clearfix clasa, precum și clasele de utilitate receptive.
În primul rând, pe ecranele mici (<768px), we have a two column layout, therefore we should clear the floats after every second list item. Add the following markup after every second list item:
Apoi, pe ecrane mici și mijlocii (≥768px și <1200px), we have a three column layout, so we need to clear the floats after every third list item. To do this, we add some extra markup after every third list item (not necessary for the last one):
În cele din urmă, pe ecrane mari (≥1200px), avem o dispunere de patru coloane, deci ar trebui să ștergem flotoare după fiecare al patrulea element de listă. Din nou, adăugați un marcaj mai mare, de data aceasta după fiecare al patrulea element din listă:
Aceste blocuri adiționale sunt un pic dezordonate (o mulțime de oameni nu le place să folosească marcajul pentru stiluri de conducere), dar aceștia obțin același rezultat final ca și metoda noastră inițială. Fiecare element de listă este ascuns, cu excepția cazului în care anumite puncte de întrerupere o asumă afișare: bloc; acționând efectiv ca divizoare orizontale invizibile între rândurile noastre.
Iată demo-ul asociat:
Concluzie
În acest scurt articol, am abordat două tehnici simple pentru a crea planuri receptive cu flotoare. Deși flotele ar putea să nu fie (și nu ar trebui să fie) prima alegere pentru modelele moderne, sper că la un moment dat veți găsi aceste tehnici utile. Dacă utilizați orice altă tehnică, asigurați-vă că o partajați cu noi!
Share
Accentsconagua
