--- title: Reszponzív mezők menu: Reszponzív mezők visible: true learningContent: reszponziv_mezok_demo: publishId: 6c1816f0-149c-11e8-0d0c-9b7963effe61 taxonomy: documentType: [docs] label: [mező tulajdonságok ablak, műveletek mezőkkel] project: [LCMS] role: [editor] --- A **reszponzív webdesign** célja az, hogy minden képernyőn (mobiltelefon, tablet, asztali számítógép, és ezek különböző méretein) optimális megjelenést biztosítsunk. Ennek egyik, és általunk is használt eszköze a **flexbox model**, ami lehetővé teszi az elemek átrendezését a böngésző szélességétől függően. Ezt úgy tudjuk elérni, hogy fix mező és objektum méretek és pozíciók helyett rugalmasan változó, egymás alá megtörő elemekben gondolkodunk. !! Ha szeretnél bővebben olvasni a flexbox modellről, illetve kipróbálni a működését, ezeken a linkeken megteheted: ! ! - [How Flexbox works] ! - [Visual guide] ! - [Flexbox playground] ! [TOC] ## A lejátszó méretének beállítása Reszponzívan viselkedő tananyag készítéséhez a `Content Configuration Editor` `Méretez (Scale)` pontjában a **`Flex`** beállítást kell kiválasztani: (A `Méretez/Scale` mező melletti arányszámokat ebben az esetben nem értelmezzük.) ![Content Configuration, flex beállítás](file001.png?lightbox&crop=215,90,414,319&classes=inline "Content Configuration, flex beállítás") Ez megfelel a `Width` megjelenítésnek, viszont ha a böngésző mérete csökken, akkor nem arányosan fogja csökkenteni a tananyag méretét, hanem **reszponzívan.** A tananyag lejátszó méretét a `Meta editor / Nézet / szélesség (Meta editor / View / width)` pontban kell beállítani. Ez lesz a lejátszó maximális szélessége. Ha a böngésző ennél kisebb, akkor csak a lejátszó szélessége lesz kisebb. ![Meta editor, nézet](file002.png?lightbox&crop=197,7,396,431&classes=inline "Meta editor, nézet") ## A mezők beállítása Azt, hogy a mezők milyen módon reagáljanak a böngésző szélességének változására, a 'Mező tulajdonságok' ablakban tudjuk beállítani. ### Szülőmezők beállítása ! Fontos. hogy a `Content configuration Editorban` méretezésnél mindig a `Flex` beállítást válasszuk ki, ha reszponzív tananyagot szeretnénk szerkeszteni. A szülőmezőn tudjuk beállítani, hogy a benne levő gyerekmezők milyen módon viselkedjenek a böngésző szélesség változásának hatására. ![Meta editor, nézet](file003.png?lightbox&crop=604,374,900,403&classes=inline "Meta editor, nézet") Nexiusban a következő lehetőségek állnak rendelkezésünkre: - **Sor / row:** Nem töri meg a sort, akkor sem, ha nem fér el a kijelzőn. - **Sortörés / Row wrap:** A böngésző szélességének csökkenésére megtöri a sort. Amikor az elemek már nem férnének ki egy sorba, a sor végén levő elemeket új sorba rendezi, az első sor alá. - **Fordított sortörés / Row reverse:** Ugyanaz, mint a sortörés, de a sor végén levő elemeket a sor fölé rendezi. !!!! Az alábbi tananyagban vidd az egered az oldal tetején levő százalékos értékek fölé, és próbáld ki, hogyan változik a mezők elrendezése a szülő mező szélesség változásának hatására. ! ! {{ header.learningContent.reszponziv_mezok_demo|showPage('#22.nodeId/1014','100%','874px') }} Ha azt szeretnénk, hogy a mezők ilyen módon reagáljanak a böngésző szélességének változására, figyelnünk kell arra, hogy a szülőmezők szélességét százalékosan adjuk meg. Fix méret esetén a mezők szélessége nem fog változni ha a böngésző mérete változik. A százalékos szélesség viszont relatív szélesség érték és mindig a szülő mező szélességére reagál. ### Gyerekmezők beállítása Ha a szülőmező beállítása flex, akkor a gyerekmezőknél az x/y koordináta helyén a **csökkenés/shrink** és **növekedés/grow** paramétereket tudjuk beállítani. Az itt beállítható számok arányszámok, azt jelzik, hogy növekedés esetén a rendelkezére álló szabad területből mekkora részt foglalhat el egy-egy mező, illetve csökkenésnél a túllógás méretét milyen arányban vonja ki a gyerek mezők szélességéből. !!!! Tegyük fel, hogy a szülő mező 600px széles, a gyerekek szélességeinek összege pedig 500px. Ilyenkor van még 100px szabad terület, amit a Növekedés paraméterben beállított számok arányaiban fog szétosztani a böngésző a gyerek mezők közt. Ha tehát két gyerek mező közül az egyiknél a Növekedés: 1, a másiknál a Növekedés: 2, akkor az első gyerek mező +33px-lel, a másik pedig +67px-lel lesz szélesebb, mint a beállított érték. ! ! Ha ez a szám 0, akkor a gyerekmező abban a méretben vagy százalékban jelenik meg, amit a szélességnél beállítottunk. Ilyenkor nem szeretnénk, hogy a mező szélessége növekedjen vagy csökkenjen. !!!! Az alábbi tananyagban vidd az egeret az oldal tetején levő százalékos értékek fölé, és próbáld ki, hogyan csökken vagy növekszik arányosan a mezők mérete a szülő mező méretének változására. Ezt a szülőmező szélesség változást most egy `width%` eseménnyel idéztük elő, de ugyanígy változhat a böngésző szélesség változás hatására is. ! ! {{ header.learningContent.reszponziv_mezok_demo|showPage('#22.nodeId/1018','100%','1130px') }} [How Flexbox works]: https://medium.freecodecamp.org/an-animated-guide-to-flexbox-d280cf6afc35 [Visual guide]: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties [Flexbox playground]: https://codepen.io/enxaneta/full/adLPwv