A Css elrendezések fixek, gumiból készültek, rugalmasak
Rögzített szélességű breadboard modellek
Ennek az elrendezésnek az előnyei
Hátrányai
- Kijelentette, hogy „az optimális maximális olvashatóság” width nem tudja megfelelően betölthessék szerepüket, ha a szöveget az oldalon szignifikánsan nőtt, változatlan szövege sormagasságot a méret (ebben az esetben kiderül, hogy a szöveg „hígítja”, és ez nagyon nehéz észlelni) . Azonban érdemes megjegyezni, hogy ha van jó design, akkor ez a probléma csak akkor fordul elő, ha a szöveg nagyon erősen kibővült;
- A kis monitorokkal rendelkező felhasználók (640 × 480 képpont, nem szabad elfelejteniük a mobileszközöket is) egy vízszintes görgetősávot fognak találni a webhelyen, szélessége 760 képpont. Bár ez nagyon ritka probléma;
- A 760 képpontos méretű webhely nagyon csúnya (túl szűk) lehet nagy képernyőfelbontású monitorokon;
- A kis szélessége az elsődleges tartály korlátozhatja ésszerű oszlopok számát az elrendezés, de ez is lehet előny, mert ez teszi létre a helyszínen, figyelembe véve az ilyen merev keret (azaz különösen a sok fodor és tervezési technikák nem alkalmazhatók, mert ezek a korlátozások ).
Tippek a fix szélességű elrendezéshez
Példa fix szélességű blokkra
Gumi elrendezések
Gumi elrendezés akkor érhető el, ha a fő konténer egyáltalán nem ad meg egy szélességet (alapértelmezés szerint 100% lesz), vagy beállítja a szélességet százalékban. Más szóval, a határok és a paddingek figyelembevétele nélkül, egy 100% -os szélességű weboldal vízszintes görgetősáv létrehozása nélkül elfoglalja a képernyő teljes látható részét.
A gumi modell előnyei
- Megfelelő elrendezéssel a gumi elrendezés lehetővé teszi a nagyfokú sokoldalúságot a kijelzőn, függetlenül a felhasználó ügyfélablakának szélességétől. A gyakorlatban ez meglehetősen ritka, de elméletileg, ha minden rendben történik, akkor ez lehetséges;
- A gumi elrendezés egybeesik az alapértelmezett böngésző által használt elrendezéssel, ami "ideológiailag helyesnek" tekint. De lehetséges-e megfontolni a fejlesztő azon szándékát, hogy "ideológiailag helyes" webhelyet hozzon létre egy plusz viszonylag a használatának kényelmével kapcsolatban? Azt hiszem, te tudsz;
- A webhely gumi elrendezése lehetővé teszi a rendelkezésre álló képernyőfelbontás maximális használatát. Az oldal tartalma többnyire "a hajtásvonal felett" (vagyis az oldal további görgetése nélkül látható). Azonban ...
Tekintsük az elrendezés hátrányait
- Túl sok olvasható szöveges oldal, és a teljes rendelkezésre álló terület kitöltésére irányuló vágya káros hatással lehet a felhasználók kényelmére. Túl sok szöveg képes "összetörni" a felhasználót, és a webhely zsúfolt vagy kaotikus. Van egy mondás: „Az üres tér adja» ( »white space adja«, nem tudom, az orosz megfelelője a kifejezést, ez úgy értendő, hogy az üres tér növelése érdekében szükség van a hangsúly a tartalmi), és ez akkor is igaz, a weboldalak számára;
- Ha az elrendezés kényszer szélesség használni CSS max-width tulajdonság (amely nem támogatja az Internet Explorer (IE) 6-os verzió és a korábbi, rövid, általános (rosszul) támogatott), és csak egy guru elrendezés eredménye lehet a törekvés a „helyes ideológia” kap legjobb esetben olyan webhelyet, amelyet nehéz használni. Képzelje el, hogy el kell olvasnia egy 1000 képpontnál hosszabb sztringet, és tudatában van a problémának.
Néhány tipp az elrendezés használatához
- Használja a gumi elrendezését szigorúan erre a célra. Ne hagyja, hogy a törekvéseid mindent "ideológiailag helyes" módon tegyenek meg, hogy a józan ész ellen irányuljanak. Biztos nagyon jó oka lehet ennek a fajta elrendezésnek a használata. Ha továbbra is úgy dönt, hogy használja, győződjön meg róla, hogy a webhelyének gumitervezése jól néz ki a legtöbb képernyőfelbontásban. Ellenkező esetben hagyja, a játék nem éri meg a gyertyát;
- Amikor egy gumi elrendezése van olyan terület, fix szélességű, így, sőt, van egy hibrid gumi és a rögzített elrendezésű, és annak minimális szélessége határozza meg a szélessége a rögzített blokkok vagy a legnagyobb a tárgyak (például egy kép). Legyen óvatos. Ha gumi elrendezéssel szeretne helyet készíteni, úgy kell lennie, és nem csak szavakban;
- Ha még mindig gumiból és rögzített elrendezésből áll (mint például a CSS útmutatóban látható, győződjön meg róla, hogy az OK-nak megfelelőnek tűnik 800 × 600-as felbontásban.
És valójában egy példa
Elasztikus elrendezés
Elasztikus elrendezés használata esetén a fő tartály és más (fontos) elemek mérete az em. Em egyenesen arányos a szöveg vagy betű méretével. Ezért, ahogy az oldal szövegének mérete növekszik, az emben megadott partícióméretek arányosan nőnek.
A rugalmas elrendezés egyik példája a CSS Zen Garden bemutatója (elasztikus és gumi elrendezés korlátozott hibridje). Amennyire én tudom, ez az egyetlen nézet a CSS Zen Garden, amely rugalmas és hozzáférhető, amennyire lehetséges, egy nem szerkeszthető (eredetileg meghatározott) oldal elrendezés. Nagyon büszke vagyok erre a tényre (valóban egy nagyon jó példa, de az Opera 9.22-nél, melynek szélessége kisebb, mint 150 képpont, a blokkok "átfutnak" egymáson, ezt a hatást a gumi elrendezésének minuszaiban ismertetjük.
Elasztikus elrendezés előnyei
- Ha minden rendben van, akkor ez egy nagyon stabil elrendezés, mert minden arányosan változik. Ennek eredményeképpen, bármilyen méretezéssel, minden még mindig jó;
- Elasztikus elrendezés meglehetősen bonyolult dolog, hihetetlenül hideg, és minden alkalommal, amikor először kihívást jelent magának. Az első ismeretségem Tommy Olsson helyén volt (ami nyilvánvalóan jó példa arra, hogyan lehet rugalmas helyeket létrehozni). Lenyűgözött, mosolygott, és mélyen elgondolkodott arról, hogy kevéssé tudom (lenyűgözött a pokolból). A legjobb példa az lenne, ha a szöveget rugalmas elrendezéssel növelnénk: csak tartsuk lenyomva a ctrl billentyűt és forgassuk az egér kereket ... Már hallom, hogy "wow"
A rugalmas elrendezés hátrányai
- A vonzereje és eleganciája ellenére nem igazán tudom a jó alkalmazását, megkérdezem, miért van rá szükség?
- Ha nem korlátozza a külső tároló méretét, ez az elrendezés valóságos katasztrófa lehet a felhasználó számára: szélesebb, szélesebb és szélesebb - látható előnyök nélkül.
Néhány tipp a rugalmas elrendezéssel kapcsolatban
- Ha rugalmas elrendezést alkalmaz, győződjön meg róla, hogy kis monitorokon működik. Egyébként miért szükséges?
- A rugalmas blokk méretének korlátozása a külső tartály méreteinek meghatározásával (gumi vagy rögzített szélesség alkalmazásával, azaz hibrid elrendezés létrehozásával). Például #wrapper
- Ne feledje, hogy az IE 6 vagy annál kevesebb nem támogatja a maximális szélességű tulajdonságot, ügyeljen arra, hogy amikor a legnagyobb szöveget az IE-ben állítja be, akkor nem látja a 1024 × 768-as vízszintes görgetősávot. Mindenesetre láthatja a megoldást a CSS Zen Garden számára. A következő lépés az, hogy a 800 × 600 felbontású felbontást ugyanolyan feltételek mellett készítsük el. Példaként láthatja a hosting oldalam flexibilis elrendezését (a korlátozott gumi és az elasztikus elrendezés hibridje). Azt tervezem, hogy egy éven belül átfordítom, de most a példa nagyon jól működik.
Példa rugalmas elrendezésre
Végezetül
Amint látja, az elrendezések mindegyikének a plusz és mínusz (talán mások is ismerik?). És nem tudom biztosan megmondani, melyik közülük jobb. Ez csak a honlap bemutatásának szintje, amint azt az elején észrevettem, tehát nagy felelősséggel és kevésbé bizalommal kijelenthetem, hogy bármelyik ilyen elrendezés alkalmazható a hozzáférhető, felhasználóbarát webhelyek elrendezésére. Ezért azt javaslom, hogy ne vegye be az "ideológiai igazságosság" követői útját, csak azért csináljon valamit, mert "helyes", a hozzáférhetőség vagy a kényelem kárára. Nem próbálom kritizálni őket, mert arra kényszerítenek bennünket, hogy minden lépésre tükrözzük és inspiráció forrása, de ha követjük az utat, óvatosan járjunk el. Legyen egy cél, és lesz egy terv. "Csak mert" nem elég ok, szóval elmondom a gyermekeimet.