Zmniejszanie wyskości diva wraz z szerokością okna reponsive

Question

Witam

Jaki mam wprowadzić kod aby div na stronie po zmniejszeniu szerokości okna zmieniał wysokość i szedł w dół ?

Answer 1

Można to uzyskać na różne sposoby. 

• Grid i nie mówię tutaj o Grid Layout dostępnym w CSS, a o "własnoręcznie" wykonanym gridzie. O co chodzi? Tworzymy pewien pojemnik na naszą stronę i w nim umieszczamy dane w kolumnach. Kolumny te we właściwościach mają pewną szerokość wyrażoną w procentach. Dla 3 kolumn jest to około 33% (100%/3). I są one ułożone obok siebie dzięki właściwości float. Po osiągnięciu pewnej granicznej wartości (@media) zmieniamy właściwości pewnych kolumn, aby na przykład miały większą szerokość skutkiem czego inne "zejdą" niżej itp.
  Jest masa gotowych rozwiązań tego typu, które można podejrzeć żeby zrozumieć o co chodzi. Skeleton, Simple Grid, Bootstrap Grid
• Flexbox jest to pewien rodzaj layoutu w CSS. Dzięki niemu można w łatwy sposób manipulować elementami, ich kierunkiem itp. Tutaj można tak naprawdę stosować odpowiednie właściwości i przy wybranych szerokościach (@media) zmieniać je tak, aby pasowały.
• Grid Layout tak jak flex jest "wbudowanym" rodzajem layoutu w CSS. Ten daje nam większe możliwości od Flexa ponieważ możemy układać elementy dowolnie na płaszczyźnie. Jest bardzo rozbudowany, a więcej można przeczytać tutaj. Warto jednak pamiętać, że jest on dosyć świeży dlatego nie wszystkie właściwości mogą działać na wszystkich przeglądarkach, a na tych starszych po prostu nie będzie działać. 

Warto pamiętać też o @media, które pozwoli na zmianę stylów w zależności od parametrów urządzenia :) 

Comments

chce bardziej uzyskać efekt odwrotny od efektu skalowania strony w tym divie