Sok reszponzív webdesign tanuló nehezen képes százalékokat használni a szélességi értékekhez. Pontosabban összetéveszthető, hogy a böngésző hogyan számolja ki ezeket a százalékokat. Az alábbiakban részletes magyarázatot talál arról, hogy a százalékok hogyan működnek a szélesség kiszámításakor egy adaptív webhelyen.
Pixelek használata szélességi értékekhez
Amikor használja pixel szélességértékként az eredmények nagyon egyértelműek. Ha használja CSS Ha egy dokumentum fejlécében egy elem szélességét 100 pixel szélességre kívánja állítani, akkor ez lesz az elem azonos méretű, amelyet 100 pixel szélességűre állít be a webhely tartalmában, láblécében vagy az oldal egyéb területein. A képpontok abszolút értékek, tehát 100 képpont 100 képpont, függetlenül attól, hogy a dokumentumban hol jelenik meg egy elem. Sajnos, bár a pixelértékek könnyen érthetők, nem működnek jól az adaptív webhelyeken.
Ethan Marcotte találta ki a kifejezést „Reszponzív webdesign”, amely elmagyarázza, hogy ez a megközelítés 3 fő főt tartalmaz:
- Folyadékrács
- Folyékony közeg
- Média lekérdezések
Az első két pontot, a folyadékrácsot és a folyadékközeget úgy érjük el, hogy pixelek helyett százalékokat használunk az értékek méretezéséhez.
Százalékok használata a szélességi értékekhez
Ha a százalékok segítségével meghatározza az elem szélességét, akkor az elem tényleges mérete attól függően változik, hogy hol található a dokumentumban. A százalékok relatív értékek, vagyis a megjelenített méret a dokumentum többi eleméhez viszonyítva.
Például, ha beállítja az an szélességét kép 50% -ig, ez nem azt jelenti, hogy a kép a normál méretének felén fog megjelenni. Ez egy általános tévhit.
Ha egy kép valójában 600 pixel széles, akkor a CSS-érték használata annak 50% -os megjelenítéséhez nem jelenti azt, hogy 300 pixel széles lesz a webböngészőben. Ezt a százalékos értéket az adott képet tartalmazó elem alapján számítják ki, és nem maga a kép tényleges mérete. Ha a tároló (amely lehet osztás vagy más HTML elem) 1000 képpont széles, akkor a kép 500 képpontos lesz, mivel ez az érték a tároló szélességének 50% -a. Ha az elemet tartalmazó elem 400 képpont széles, akkor a kép csak 200 képpontos lesz, mivel ez az érték a tároló 50% -a. A szóban forgó kép mérete 50%, amely teljes mértékben attól függ, hogy melyik elem tartalmazza azt.
Ne feledje, hogy az adaptív tervezés folyékony. Az elrendezések és a méretek a képernyőméret / eszközváltozás. Ha fizikai, nem internetes szempontból gondolkodik ezen, olyan, mintha egy kartondoboz lenne, amelyet csomagolóanyaggal tölt meg. Ha azt állítja, hogy a doboznak félig tele kell lennie ezzel az anyaggal, akkor a szükséges csomagolás mennyisége a doboz méretétől függ. Ugyanez vonatkozik a webdesign százalékos szélességére is.
Százalékok az egyéb százalékok alapján
A kép / konténer példában pixelértékeket használtunk a tartalmazó elemhez, hogy megmutassuk, hogyan fog megjelenni az adaptív kép. A valóságban a tartalmazó elemet szintén százalékban állítanák be, és a kép vagy más elemek a tárolóban belül megkapják az értékeiket egy százalékos százalék alapján.
Itt van egy másik példa.
Tegyük fel, hogy van olyan weboldala, ahol a teljes webhely egy „konténer” osztályú osztályon belül található (általános webtervezési gyakorlat). Ebben a felosztásban három másik rész található, amelyeket végül stílusban fog megjeleníteni 3 függőleges oszlopként.
Most használhatja a CSS-t, hogy a „konténer” részleg méretét 90% -ra állítsa be. Ebben a példában a konténerosztásnak nincs egy másik eleme, amely körülveszi, csak a test, amelyet nem állítottunk be konkrét értékre. Alapértelmezés szerint a törzs a böngészőablak 100% -ában jelenik meg. Ezért a „tároló” részleg százalékos aránya a böngészőablak méretén alapul. Amint az a böngészőablak mérete változik, a "tároló" mérete is változik. Tehát, ha a böngésző ablaka 2000 pixel széles, akkor ez a felosztás 1800 pixelen jelenik meg. Ez a 2000 (90 x 90, 1800 = 1800) 90 százalékának számít, ami a böngésző mérete.
Ha a „tárolóban” található „col” osztások mindegyikét 30% -ra állítjuk be, akkor ebben a példában mindegyik 540 pixel széles lesz. Ez a tároló által képviselt 1800 képpont 30% -ának (1800 x, 30 = 540) 30% -ának számít. Ha megváltoztatnánk az adott konténer százalékos arányát, akkor ezek a belső osztások megváltoznának a méretükben is, mivel ettől a konténerelemtől függenek.
Tegyük fel, hogy a böngészőablakok 2000 pixel szélességben maradnak, de a tároló százalékos értékét 90% helyett 80% -ra változtatjuk. Ez azt jelenti, hogy most 1600 pixel szélességgel fog megjeleníteni (2000 x, 80 = 1600). Még ha nem is változtatjuk meg a CSS-t a 3 „col” részlegünk méretével, és 30% -on hagyjuk őket, akkor másképp jelenít meg most, mivel tartalmú elemük, vagyis az a kontextus, amellyel méretre méretezik őket megváltozott. Ez a három felosztás 480 pixel szélességben jelenik meg, ami 1600 30% -a, vagy a tároló mérete 1600 x, 30 = 480).
Ezt még tovább véve, ha egy kép a „col” felosztás egyikében található, és a kép százalékos méretben van méretezve, akkor a méretezésének kontextusa maga a „col” lesz. Amint az a „col” felosztás megváltozott, a benne lévő kép is változott. Tehát, ha a böngésző vagy a „tároló” mérete megváltozik, az hatással lesz a három „col” részlegre, ami viszont változtassa meg a kép méretét a „col” belül Mint látható, ezek mind összekapcsolódnak, ha a százalékos alapú méretezésről van szó értékek.
Ha meggondoljuk, hogy egy weboldal belsejében hogyan jelenik meg egy elem, ha a szélességéhez százalékos értéket használnak, meg kell értenie azt a kontextust, amelyben az elem az oldal jelölésében található.
Összefoglalva
A százalékok kritikus szerepet játszanak az adaptív webhelyek elrendezésének létrehozásában. Akár képeket reagálóan méretez, akár százalékos szélességet használ, hogy valóban folyékony rácsot készítsen, amelynek méretei megfelelnek viszonyulnak egymáshoz, ezeknek a számításoknak a megértése szükséges lesz a megjelenés eléréséhez vágy.