Megtudhatja, hogyan határozzák meg a webböngészők a százalékos értékeket tartalmazó megjelenítést
A reagáló webdesign sok tanulójának nehézsége van a szélességi értékek százalékainak használatával. Pontosabban, zavar van azzal kapcsolatban, hogy a böngésző hogyan számítja ki ezeket a százalékokat. Az alábbiakban részletes magyarázatot talál arra, hogy a szélességszámítások százalékos aránya hogyan működik egy érzékeny webhelyen.
Képpontok használata a szélességi értékekhez
Ha pixeleket használ szélességként, az eredmények nagyon egyszerűek. Ha a dokumentum fejlécében egy elem szélességi értékének 100-szoros szélességének beállítására használja a CSS-t, akkor az adott elemnek meg kell egyeznie a weboldal tartalmának vagy láblécének vagy más területeinek 100-szoros szélességével beállított elemével. oldalt. A képpontok abszolút értékek, így 100 képpont 100 pixel, függetlenül attól, hogy a dokumentumban mely elem jelenik meg. Sajnos, bár a képpontértékek könnyen érthetők, nem reagálnak a megfelelő webhelyekre.
Ethan Marcotte a "reaktív web design" kifejezést kitalálta, és ezt a megközelítést három kulcsfontosságú megbízó szerepére magyarázta:
- Egy folyadékháló
- Folyékony közeg
- Média lekérdezések
Az első két pontot, a folyadékrácsot és a folyékony közegeket úgy érik el, hogy pixelek helyett százalékokat használnak az értékek méretezésére.
Százalékos szélességi értékek használata
Ha a százalékokat egy elem szélességének létrehozásához használja, az aktuális méret, amelyik megjelenik, attól függően változik, hogy hol van a dokumentumban. A százalékos érték relatív érték, azaz a megjelenített méret a dokumentum más elemeihez viszonyítva.
Például, ha a kép szélességét 50% -ra állítja , ez nem jelenti azt, hogy a kép normál méretének felénél fog megjelenni. Ez egy általános tévhit.
Ha egy kép natív 600 pixel széles, akkor a CSS érték 50% -os megjelenítéséhez nem jelenti azt, hogy 300 képpont széles lesz a webböngészőben. Ez a százalékérték kiszámítása az adott képet tartalmazó elem alapján történik, nem magának a képnek a natív mérete. Ha a konténer (amely lehet megosztottság vagy más HTML elem) 1000 pixel széles, akkor a kép 500 képpontos lesz, mivel ez az érték a konténer szélességének 50% -a. Ha a tartalmi elem 400 pixel széles, akkor a kép csak 200 képponton jelenik meg, mivel ez az érték a tartály 50% -a. A szóban forgó kép 50% -os méretű, amely teljesen attól függ, hogy melyik elem tartalmazza.
Ne feledje, a reagáló tervezés folyékony. Az elrendezések és méretek a képernyőméret / eszköz változásakor változnak . Ha ez a fizikai, nem internetes kifejezésekre gondol, akkor olyan, mintha egy karton doboz lenne, amit csomagolóanyaggal töltel fel. Ha azt mondja, hogy a doboznak fel kell töltenie az anyagot, a szükséges csomagolás mennyisége a doboz méretétől függ. Ugyanez igaz a webes megjelenés százalékos szélességére.
Százalékos arányok alapján
A kép / konténer példánál a tartalmi elem képpontértékét használtam fel arra, hogy bemutassa, hogyan jelenik meg a reagáló kép. A valóságban a tartalmi elem is egy százalékra van állítva, és a képen, vagy más elemeken belül a tartály értékeit egy százalékos arány alapján kapja meg.
Egy másik példa erre a gyakorlatban.
Mondja meg, hogy van olyan webhelye, ahol az egész webhely egy "konténer" osztályú üzletágban található (egy közös webes tervezési gyakorlat). Ebben a szétválásban három másik megosztottság van, melyeket három függőleges oszlopként fog megjelenni. Ez a HTML így néz ki:
Most a CSS használatával állíthatja be a "konténer" osztály méretét, hogy 90% -ot mondjon. Ebben a példában a konténerosztálynak nincs olyan eleme, amely körülveszi a testet, amelyre nem állítottunk be semmilyen konkrét értéket. Alapértelmezés szerint a szervezet a böngészőablak 100% -át teszi ki. Ezért a "konténer" osztály százalékos aránya a böngészőablak méretétől függ. Mivel a böngészőablak méretben változik, így a "konténer" mérete is. Tehát ha a böngészőablak 2000 képpont széles, akkor ez a megosztás 1800 képpontos felbontásban jelenik meg. Ez a 2000-es 90% -os (2000 x .90 = 1800) érték, amely a böngésző mérete.
Ha a "konténerben" található "col" osztások mindegyike 30% -os méretre van állítva, akkor mindegyikük 540 képpont széles lesz ebben a példában. Ez az 1800 képpont felbontású 30% -ának felel meg, amelyet a tartály (1800 x .30 = 540). Ha megváltoztattuk az adott tartály százalékát, akkor ezek a belső megosztottságok is változni fognak az általuk létrehozott méretben, mivel ezek az adott elemtől függenek.
Tegyük fel, hogy a böngészőablakok 2000 képpontos szélességgel maradnak, de a tartály százalékos értékét 90% helyett 80% -ra módosítjuk. Ez azt jelenti, hogy 1600 képpontos felbontásban fog megjelenni (2000 x .80 = 1600). Még akkor is, ha nem változtatjuk meg a CSS-t 3 "col" osztályunk méretére, és 30% -ra hagyjuk őket, akkor most már másképp fognak megjelenni, mivel azok tartalmi eleme, amelyik az általuk méretezett kontextus, megváltozott. Ez a három részleg 480x140 pixeles felbontást jelent, ami 1600% 30%, vagy a tároló mérete (1600 x .30 = 480).
Ha ezt még jobban figyelembe vesszük, ha egy ilyen "col" osztáson belül egy kép jelenik meg, és a képet egy százalékos méret alapján méretezik, akkor a méretezésének összefüggése maga a "col". Mivel a "col" részleg nagysága megváltozott, a kép belsejében is változna. Tehát ha a böngésző vagy a "konténer" mérete megváltozott, ez hatással lenne a három "col" osztásra, ami viszont megváltoztatná a "col" belsejében lévő kép méretét. Amint láthatjuk, ezek mind kapcsolódnak százalékos alapú méretezési értékekről van szó.
Ha figyelembe vesszük, hogy miként fog megjelenni a weboldal belsejében lévő elem, ha annak százalékos értékét használják a szélességéhez, akkor meg kell értenie azt az összefüggést, amelyben az elem az oldal jelölőpontjában található.
Összefoglalva
A százalékos arány kritikus szerepet játszik a reagáló webhelyek elrendezésének létrehozásában. Függetlenül attól, hogy a képeket megfelelően méretezi vagy százalékos szélességben használja, hogy egy valóban folyékony rácsot alakítson ki, amelynek méretei egymáshoz viszonyítva, a számítások megértése szükséges lesz a kívánt megjelenítés eléréséhez.