Flexbox-ban szoktak konkret height/width-et beallitani?
Ugy ertem, hogy ha pl szeretnem ha a header kb 20px magas legyen, a main section mondjuk 150px es a footer 10px?
Tudom van a flex shrink es a flex grow, de ezek csak helyet toltik ki megfelelo aranyban es a flex basis kb hasonlo, mint a width ha row a direction.
válasza:Relatív értékekkel dolgozz, ha fontos a reszponzivitás számodra.
Tudom ajánlani az 'em' és 'rem' relatív értékeket.
Ezek a (így sorban) a közvetlen szülőelem, és a root elem betűnagyságához viszonyítva számolják ki az értéket. Az alapbeállítás szerint ez 16px.
Tehát ha 20px-t szeretnél megkapni akkor => 1.25em
Másik, height-et ne használj, megöli a reszponzivitást. Paddinggelj ha valami mértetét beszeretnéd állítani. Ott is az em és rem párost használd.
Miért jó ha ezeket követed? Más kijelzőkre való optimalizáláskor így bőven elég a body betűméretét átállítani és automatikusan igazodik hozzá minden elem.
Remélem tudtam segíteni!
Koszi a nagyon hasznos valaszt.
em, rem ertekeket ismerem, de igy nem nagyon fordult meg a fejemben hogy oket hasznaljam foleg ha a rezponzivitast is nezem.
A paddingeleses tippet is koszi.
Tanulom a dolgokat...koszonom meg1szer.
válasza:Igazán nincs mit ;)
Lényeg a Mobile First gondolkodás, és, hogy a "keret igazodjon a contenthez, és ne a content a kerethez".
Kiprobltam a rem-et.
ha ennyire hasznos akkor a sok tutorialban miert pixeleznek?
nem lenne egyszerubb rem-ben megadni kb mindent?
pl flexboxnal erdemes wrappert alkalmazni es abban felepiteni mindent?
lattam olyat is, hogy wrapper nelkul keszult el a layout.
válasza:Azért mert nagyon sok tutorialt kezdők raknak össze. Pixelezés megöli a reszponzivitást. Bodynak alapból van egy 16 pixeles betűnagysága, ahhoz szoktunk számolni mindent.
Esetleg még azt divat csinálni, hogy az elején megadsz a * tagnek egy font-size 62.5%-ot ami az alap 16 pixeles betűnagyságot átállítja 10-re így könnyebb számolni em-mel és rem-mel.
Wrapper nélkül is lehet reszponzív layout összerakni. Konkrétan ha követed az em-es, rem-es megoldást akkor elég csak átírni a body betűméretét meg pár helyen a flex directiont - grid template-t átírni row-ról columnre.
Koszonom a hasznos valaszaidat.
Egyedul tanulom ezeket a dolgokat ea mentor nelkul lassan haladok sajna.
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!