Responsywność strony bez boostrapa

[Gość]

Powracam po powoli do fornt-endu i mam taki problemik ,jak sobie radzić responsywnośćią strony bez bootstrapów ?Jechać na % w css'ie ?

[Hans Kloss PL]

Przede wszystkim min-width i max-width używaj, same procenty mogą Ci rozsypać layout. No i pływających divów używaj. Nie zapomnij też dodać:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

żebyś miał kontrolę nad tym co się dzieje na tel.

[Gość]

@Hans Kloss PL jakich "pływających divów"? bo nie kumam

[Hans Kloss PL]

No divów z atrybutem float w css:

https://css-tricks.com/all-about-floats/

[Gość]

o to Ci chodziło dobra dzięki

[Burned123]

Pamiętaj o tym w sekcji HEAD

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

A następnie w swoim arkuszu CSS (lub jakimś innym, oddzielnym) dodajesz:

@media (max-width: 480px) {
...
}

@media  (min-width: 481px) and (max-width: 767px) {
...
}

@media (min-width: 768px) and (max-width: 979px) {
...
}

@media (min-width: 980px) and (max-width: 1200px) {
...
}

@media (min-width: 1200px) {
...
}

No i pomiędzy nimi dodajesz klasy, które będą się zachowywać w zależności od rozdzielczości.

Aby strona była responsywna nie koniecznie potrzebny jest bootstrap czy inny framework

[Vertoi]

polecam flexbox

[Piotr Trefl]

Zastosowanie dekoratora @media to najlepsze rozwiązanie, jeśli nie chcesz korzystać z Bootstrapa. Jest też kilka innych frameworków, Foundation jest podobno też bardzo popularny. Sam zabrałem się jakiś czas temu za Bootstrapa i nie przysporzył mi wielu trudności. Dokumentacja jest przejrzysta, nazwy klas intuicyjne. Pomógł mi też trochę kurs na Codecademy, dzięki któremu zobaczyłem, jak można wykorzystać ten framework w praktyce.