• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
161 wizyt
pytanie zadane 4 września 2017 w JavaScript przez SzukającyPrzygód Bywalec (2,310 p.)
Witam

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

1 odpowiedź

+1 głos
odpowiedź 4 września 2017 przez mitelak Pasjonat (23,330 p.)
wybrane 4 września 2017 przez SzukającyPrzygód
 
Najlepsza

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 :) 

komentarz 5 września 2017 przez SzukającyPrzygód Bywalec (2,310 p.)
chce bardziej uzyskać efekt odwrotny od efektu skalowania strony w tym divie

Podobne pytania

0 głosów
1 odpowiedź 159 wizyt
0 głosów
3 odpowiedzi 288 wizyt
pytanie zadane 28 czerwca 2022 w HTML i CSS przez zbiku25 Gaduła (3,000 p.)
0 głosów
1 odpowiedź 111 wizyt
pytanie zadane 14 października 2019 w HTML i CSS przez bugs55 Obywatel (1,090 p.)

93,005 zapytań

141,971 odpowiedzi

321,251 komentarzy

62,343 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...