Útmutató a css hangszórók adaptív tervezéshez
A CSS-oszlopok segítségével a magazin elrendezésének stílusát kis méretű jelöléssel egészítheti ki. A CSS-oszlopokat támogató böngészők elvégezik a szükséges számításokat a szép oszlopok tartalmának illesztésére és terjesztésére. Ha már gumi elrendezéssel dolgozik, akkor az oszlopok ebben az esetben automatikusan beállítódnak. A tulajdonságok megfelelő kombinációjával a CSS oszlopok egy érdekes lehetőség egy olyan elrendezés létrehozására, amely érzékeny lehet és támogatja a kecses degradációt.
Hol oszlopstílusok deklarálása
Az alábbi képen a bal oldalon a CSS-oszlopok szabályai a második bekezdésre vonatkoznak, tartalmának oszlopokká alakítása. A jobb oldalon vannak a szabályok hozzáadva a konténer elemhez, például
vagy . Több oszlopú elrendezéssé alakítása.
Az oszlopokat háromféle módon deklarálhatja:
- Az oszlopszámláló tulajdonság használata.
- Az oszlopszélességen keresztül.
- Mindkét tulajdonság használata (ajánlott).
Egy élő példa
Az oszlopok száma változatlan marad akkor is, ha a böngésző szélessége megváltozik, amint az az alább látható hif képen látható.
Használja az oszlopszélesség tulajdonságot. hogy feltárja az oszlopok szélességét.
Például, ha jobban megnézzük a bekezdés az élő alábbi példában azt találjuk, hogy a oszlop minden valójában több, mint 150pk kiállítva az oszlop-width tulajdonság.
Egy élő példa
Ha a böngésző nem képes legalább két oszlopot elhelyezni, amelyek vastagsága megegyezik az oszlopszélességgel. akkor a böngésző újra elrendezi az oszlopokat úgy, hogy végül az elrendezés egy oszlopba kerüljön.
Az alább látható hyph-kép azt mutatja, hogyan viselkednek az oszlopok, ha a böngésző szélessége szűkül. By the way, ellentétben a tulajdonság oszlopszámmal. az oszlopszélesség viszonylag érzékeny.
Az oszlopszámok és az oszlopszélesség együttes használatával jobban ellenőrizheti a CSS oszlopokat. Ön kijelentheti az egyes tulajdonságokat egyenként, vagy használhatja az oszlopok rövidített tulajdonságát.
Amikor mindkét tulajdonságot bejelöli, az oszlopszám megadja az oszlopok maximális számát, és az oszlopszélesség határozza meg az egyes oszlopok minimális szélességét.
Az alább látható hif kép azt mutatja meg, hogyan viselkedik az oszlopszám és az oszlopszélesség használata, ha a böngésző szélessége szűkült.
Oszlopok testreszabása
A CSS oszlopok beállításához a következő tulajdonságok közül néhány szerepel.
oszlop-rés
Az oszlopok közötti távolság beállításához használjon oszlop rést.
A legtöbb böngésző esetében az oszlop-rés tulajdonság alapértelmezett értéke 1em. Beállíthatja saját értékét, feltéve, hogy ez nem nulla.
A böngésző elvégzi a szükséges számításokat és elosztja az oszlopokat egyenletesen, a nagy rés ellenére.
Az alább látható hif kép azt mutatja meg, hogy a böngésző hogyan szünteti meg a bontást oszlopokra, amikor a szélesség csökken, és a rés eltűnik.
oszlop-szabály
Az oszlopok közötti függőleges vonalak hozzáadásához használja az oszlop-szabály tulajdonságot.
Ez a tulajdonság az oszlop-szabály szélesség rövidítése. oszlop-szabály-stílus és oszlop-szabály-szín. Ugyanolyan szerkezetű, mint a határterület.
Mint az oszlop rés esetében. A függőleges vonalak eltűnnek, ha a böngésző szélessége túl keskeny. Ez az alábbi képen látható.
oszlop-span
Az aktuális oszlopfolyam használatának megszakításához használja az oszlop-span tulajdonságot a gyerekek számára. Az írás idején a Firefox nem támogatta ezt a funkciót (de Bugzilla-n is elmehetsz és szavazhatsz erre a hibára).
Az alábbi képen szerepel egy cím, amely a történetben egy új szakasz kezdetét jelzi, de még mindig az oszlopfolyamban van.
oszlop-töltet
Az oszlop kitöltési mechanizmusának módosításához használja az oszlop kitöltését. Jelenleg ezt a tulajdonságot csak a Firefox támogatja.
Amikor beállítjuk az oszloptartóelem magasságát, a Firefox viselkedése eltér a többi böngésző viselkedésétől. A Firefox automatikusan fenntartja a tartalom egyensúlyát, míg a többi böngésző egymást követően kitölti az oszlopokat.
Az alábbi kép összehasonlítja a Firefox és más böngészők viselkedését, amikor az oszloptartó elem magasságát állítjuk be.
A Firefoxban ez a viselkedés megváltoztatható az oszlop-kitöltés beállításával: auto. Ennek a szabálynak köszönhetően a Firefoxban lévő oszlopok tartalmát egymás után töltjük ki. Ez látható az alábbi élő példában.
Mivel a Firefox oszlop-kitöltését magasságra kell állítani, az utóbbi kényszeríti a gumitervezést. A tartalomnak vízszintesen kell növekednie, mert Nem tud "terjedni" függőlegesen a magasság korlátozása miatt. Ezt a viselkedést az alább látható hif alakban mutatjuk be. Ebben az esetben a magasságszabályozáshoz hozzáadott médiaműveletek jöhetnek a segítséghez (körülbelül egy kicsit később)
Olyan böngészők, amelyek nem támogatják az oszloptörési tulajdonságokat. Az oszloptartó elem magasságának beállításakor egymás után kitöltik az oszlopokat. De érdemes megjegyezni, hogy ha bármely oszlop konténerelem kényszerített magasságra van állítva, akkor függetlenül a böngészőtől vagy az oszloptörlés használatától. ez a magasság még mindig tönkreteszi a gumit.
korlátozások
A tartalom túlcsordul vízszintesen
Amint az az oszloptörési szakaszban látható. Ha hozzáadjuk a magasságot az oszlopelemhez, az utóbbit vízszintesen feszítjük annak tartalmának megtartására. A tartalom túlcsordulása megtöri az elrendezést, és a felhasználóknak másképp kell nézniük.
Lehetséges megoldás egy média lekérdezés létrehozása a minimális szélességű funkcióval, és egy szabály írása a magasságban.
Az alábbi demóban szűkítettem a böngészőablakot, hogy megnézzem, mikor kezdődik az oszlopok túlcsordulása és írja le ezt a számot. Aztán írtam egy média kérést a min-width funkcióval. regisztrálja az oszlop túlcsordulásakor kapott értéket, és megváltoztatja a magasság értékét a médiában.
Ahogy az alatta látható hif alakban látható, amikor az oszlopok elkezdenek hiányozni, a magasság értéke nagyobb lesz, mint a képernyő magassága, és az oszlopok függőlegesen helyezkednek el.
Lehetséges megoldás: az oszlopok aktiválásához hozzon létre egy média kérést a min-height funkcióval.
Az alábbi példában az oszlopok csak akkor aktiválódnak, ha az oszlopelem meghaladja a 400 pixel magasságot. Erre a számra fordítottam, hogy szűkítsem a böngésző szélességét arra a pontra, ahol az oszlopok újraépülnek. Ezután beállítottam a böngésző magasságát, attól a ponttól kezdve, amikor az oszlopok a nézetablak alá esnek. Ezt a számot használtam a mínusz magasság függvényének értékére a média lekérdezésben.
Az alatta látható hif-képen látható, hogy az oszlopelemnek legalább 400 képpontosnak kell lennie ahhoz, hogy a tartalom az oszlopokban jelenjen meg.
Böngésző támogatás
A CSS oszlopok tisztességes támogatást nyújtanak a böngészők (IE10 +) számára, de még mindig megkövetelik az összes tulajdonság előtagjait. Az adott tulajdonságokkal kapcsolatos további részletekért lásd: Használható.
Még akkor is, ha kedvenc böngészője nem támogatja a több oszlopú elrendezést, úgy véli, hogy könnyen kanyarodó lebomlással könnyen egy oszlopos elrendezéssé válhat. A CSS oszlopok hasonlóak a tartalomszolgáltató mozgólépcsőhöz (ahogy Mitch Hedberg ékesszólóan megfogalmazta)
A több oszlopú elrendezés nem szünetelhet, csak egyoszlopos elrendezéssé válhat.
Ui Ez is érdekes lehet:
Kevesebb, mint hat hónap telt el a W3C munkafolyamatának utolsó változása óta, mivel a konzorcium vezetője kapott javaslatot, hogy végül alkalmazzák ezt az új folyamatot. És írd le az irreleváns HTML-specifikációkat a múzeumban, hogy ne zavarják a fejlesztőket, hogy "relevánsak legyenek".
Egy másik CSS modul, amelyről beszéltünk, észrevehetetlenül érlelte a státuszát, amellyel a W3C azt tanácsolja, hogy elkezdje az új termékek napi használatát. A tartalom tulajdonság lehetővé teszi, hogy korlátozza a renderelési fa változásait, átírja a CSS mezőket, és átméretezze őket az elemen belül. Ezért nagyon fontos ...
TÖBB
Párizsból (a fotón), ahol nemrégiben került sor a CSS munkacsoport ülésére, érdekes hírek érkeztek: a grid-row-gap és a grid-column-gap properties, valamint a grid-gap ...