Az első tapasztalatok css műsorrácsból
Azonban, a hozam 52 Firefox és a Chrome 57 megváltozott. És szinte azonnal volt egy kis probléma, az egyik a projekt, ami egy egyszerű, önálló példája annak, hogy a háló elrendezés leegyszerűsíti a dolgokat. Bár én például nem olyan lenyűgöző, inspiráló, mind a prototípus Jen Simmons kísérletek, számomra ez egy kis győzelem. És mivel gyakran előfordul, ezek a kis győzelmek gyakran megnyitja az utat valami nagyobb.
Gyakorlati tanfolyam adaptív layout Landing semmiből!
Ismerje meg a semmiből elő adaptív Landing HTML5 és a CSS3 a következő 6 napon
Kaptam egy tartalmi oldalon az alábbi prioritás:
linkként két részből áll;
szöveg részletes magyarázatot.
A régi módszer
Ebben a design, szükségünk van minden elemét visszavonuló egymástól a 1.5em minden oldalról. Először alkalmazta a technikát polupaddingov edényt és gyermekek Samantha Zhang:
De ez nem veszi figyelembe az oldalsáv blokkok, amelyek szintén szükségesek padding. És padding használni nem tudok, akkor torzítják a megjelenést. Hozzátehetjük tartályokban, de én úgy döntött, az árrés és a kijelzőn: flex,, hogy megakadályozzák az összeomlását a bemélyedés (minden esetben meg kell flexbox ezen elemek). Azt is el kell távolítania néhány margin'y oldalsáv befogadására dupla francia:
Itt az ideje, hogy adjunk alkalmazkodóképesség! Átlagban nézetablak, akkor vissza a megjelenítési szabály: flex, mellyel egyenletesen elosztva oldalsáv tartalom on-line:
A széles nézetablakban szeretnék az oldalsáv csúszott jobbra, és a tartalom maradt. Úgy döntöttünk, hogy adjunk egy wrap mindkét elemet, ami azt jelenti, hogy szükség van clearfix a tartály:
Az eredmény az aláhúzott elrendezés elemei:
Tehát mi a probléma?
Annak ellenére, hogy a CSS ebben demo nem a legragyogóbb, néhány furcsa trükkök könnyen vesznek:
Gyakorlati tanfolyam adaptív layout Landing semmiből!
Ismerje meg a semmiből elő adaptív Landing HTML5 és a CSS3 a következő 6 napon
hogy egyenlő tér körül adaptív sablonok, amire szükség van a fele a behúzás el a tartályt, és fél, hogy a gyermekek számára;
flexbox lehetőséget ad számunkra, hogy kommunikálni szándékaikról a tervezési olyan kifejezésekre, mint a sor és oszlop. Azonban, akkor az egyik vagy a másik, és ez vezet minket vissza egy kevésbé intuitív float tulajdonság abban az esetben, ha szükség van változtatni mindkét tengely egyidejűleg;
ahogy csomagolja adunk minden gyermek, kellett használni a mesterséges pszeudo-tiszta edénybe zavarok elkerülése elrendezésében oldalelemek.
Lehet, hogy azt mondják: „Miért nem használható más technika?”. Azonban a technika kompromisszumok nélkül nagyon kevés. Ha az oldalsáv helyzetben teljesen, annak tartalma nem haladhatja meg az alapvető tartalma. Ha mozgassa a csúszkát a végét, és változtassa meg a segítségével az ingatlanok érdekében kis mennyiségben, akkor be kell állítani az index fülek támogatására ustroysva.
CSS Rácsos elrendezés ebben az összefüggésben más. Épült a semmiből két tengely egyszerre. Lássuk, hogyan Rácsos elrendezés használják ezt az elrendezést.
rács módszer
Mondom a böngésző, hogy a tartály fogja használni a rács, és a horpadást elemek között kell lennie 1.5em ... nem szeparátor
Az oldalsáv ugyanaz lesz elrendezési stílus és padding. Sőt, akkor a display:-as kis négyzetben, de eddig ez túl nehéz:
Több mobil-első megközelítésben nem kell semmit. Átlagban nézetablak oldalsáv átrendezi a gyermekek két egyenlő oszlopok, amelyek mindegyike felét elfoglalja a tér:
(Vannak új egységek fr, és szeretem őket. Cut jelentése „Tört Interface Card”, majd „egy rendelkezésre álló helyet.” Jól jönne 50% és 50%, de akkor nem lenne szükséges kiszámítani a rács-különbség.)
Egy nagyszabású, használja ugyanazt a technikát, hogy a tartály, csak az első oszlopot teszünk 2FR, hogy vesz fel kétharmadának tér:
Alapértelmezésben az oldalsáv épült a sorban, és a gyermek elemek vannak nyújtva, hogy töltse ki a teret. Az utolsó lépés - amit ki kell terjedniük az oldalsáv a két sor tartalmát, és meghatározza a méret a gyermek elemek az oldalsáv alapján a legkisebb méret megjelenítéséhez szükséges azok tartalmát.
Ez az! Legújabb változata a rács korai demók változata, mivel úgy tűnik, a legújabb Firefox és Chrome:
Majdnem fele a CSS, nincsenek negatív margin'ov, és szinte semmilyen számításokat! Hurrá!
Elfelejtjük, hogy tanított
Vallomás idő: Alig kapott demo fent. Azt is gyakran kérnek segítséget a kollégám Erik Jung Cloud Négy, hogy ez a munka, mint tervezték. Visszatekintve, azt hiszem, a legnagyobb ellenség a saját 15 éves tapasztalattal írásban stílus. Annyira megszoktam, hogy az a tény, hogy meg kell figyelmen kívül hagyni a tervezési feladat, hozzászokott ahhoz, hogy meg kell beszélni a nyelvet a CSS és a munka az ő hirtelen fordulat tette a feladat nehezebb, mint szükséges. Töltött időt akarja feltörni valami baj, ha csak annyit kellett tennie, hogy azt mondják, hogy „Hé, Stretch osztásnál két sorban.”
Ebből a testmozgás, tanultam magam, hogy a CSS Rácsos elrendezés egy csodálatos dolog, és alig érteni a képességeinek a határait. Szintén jó, hogy lehetővé tette böngésző támogatja a Grid funkció kérések, és lehet, hogy használja őket, sokkal korábban, mint a gondolat. Legközelebb fogok harcolni az elrendezés, próbálja megközelíteni a problémát, mint gyakornok, ellenállva mentális „bőrkeményedés” kialakult az évek során a megoldásokat.
Felülvizsgálat: Team webformyself.
Gyakorlati tanfolyam adaptív layout Landing semmiből!
Ismerje meg a semmiből elő adaptív Landing HTML5 és a CSS3 a következő 6 napon
A legtöbb IT hírek és webfejlesztés A csatorna-távirat