RWD jak wygląda w pracy?

pytanie zadane 28 października 2016 w HTML i CSS przez subterras Użytkownik (680 p.)

Okej, ogólnie to ogarniam czym jest RWD. Ale jak tak naprawdę programuje się w "tych czasach" strony na różne urządzenia ? Flexbox ? Grid ? Media Queries ? Może sam bootstrap ? Których z tych technik najlepiej się uczyć i używać w praktyce ? Ja osobiście napisałem sobie prostego Grida na podstawie tego z bootstrapa i urzywam go pisząc kod CSS pod różne urządzenia, ale mam wrażenie że taka masa kodu, czasem różna pod różne urządzenia może być źle odbierana. I poza tym jak z jednostkami ? procenty ? em ? pixele ? Słyszałem że pixele są najgorsze, a mimo to widuję że często są stosowane na wielu stronach. Natomiast em bardzo rzadko. Oraz jak z marginesami, paddingami ? Czy piksele sa poprawne ? I ostatnia sprawa. Czy np. kontener lepiej określić ? Jego wysokosc, szerokosc czy stosować 100% ?

Sporo już ogarniam ale chcę zakończyć dla siebie ten temat w 100% i rozwiać wątpliwości. Z góry dzięki za pomoc.

2 odpowiedzi

odpowiedź 28 października 2016 przez marioosu Dyskutant (9,260 p.)

Najlepsza

Flex jest jeszcze względnie nowym rozwiązaniem i nie jest tak powszechny jak grid (bootstrapowy lub na jego wzór), ale warto się nim zainteresować.

Najlepszym rozwiązaniem jest procentowy grid z jak najmniejszym nadpisywaniem styli dla różnych rozdzielczości w Media Queries.

Jakie jednostki? Zależy jakie potrzebujesz. Jeśli mówimy o treści skalowanej na różne rozdzielczości, wszelkie szerokości najlepiej podawać w procentach - ale gdy wiesz, że przykładowo jakiś blok ma zawsze mieć określoną szerokość, to też nie bój się pixeli. Jednostka 'em' często używana do czcionki ułatwia nam sprawę, gdy chcemy proporcjonalnie zmienić rozmiar wszystkich potomków elementu. Np. ustalamy na stronę główną wielkość czcionki 14px, na jakiś blok 2em (=28px), wewnątrz tekst, dajmy 'small' 0.93em(=26px). Gdy zmienimy czcionkę bloku (np dla innej rozdzielczości) na np. 1.86em(=26px), to znacznik small będzie miał czcionkę w rozmiarze 0.93*26 ~= 24px ;) (ułatwia życie - nie trzeba wszędzie zmieniać pixeli). Czasami jak odwołujemy się do potomka, potomka, potomka (głęboko) ciężko jest odpowiednio liczyć wielkości, to możemy stosować jednostki 'rem'. Są one relatywne względem głównej czcionki dokumentu.

Ale wracając do pxieli - jeśli coś niezależnie od innych wielkości ma być ustalone - warto je stosować (albo 'rem'y).

Co do szerokości strony - czy ustalona czy 100% - zależy od projektu, jednak częściej spotykam się z rozwiązaniami dla contentu na max 1200px.

Edit: marginesy / paddingi - staraj się unikać konstrukcji margin-right: 5px; padding-bottom: 15px; jeśli możesz stosować je wymiennie - stosuj tylko jeden z rodzajów odstępów, nie mieszaj ;) . Co innego, gdy zależy nam na określonej szerokości (paddingi są wliczane do szerokości dla box-sizing: border-box; marginesy nie) lub przy obramowaniu są kluczowe różnice.

komentarz 28 października 2016 przez subterras Użytkownik (680 p.)

Wielkie dzięki, takiego podsumowania tego tematu potrzebowałem :P

komentarz 29 października 2016 przez Comandeer Guru (601,590 p.)

Flex jest jeszcze względnie nowym rozwiązaniem i nie jest tak powszechny jak grid (bootstrapowy lub na jego wzór), ale warto się nim zainteresować.

Najlepsze gridy stoją na flexboxie. Dowód? BS4 ma grid na flexboksie.

Najlepszym rozwiązaniem jest procentowy grid z jak najmniejszym nadpisywaniem styli dla różnych rozdzielczości w Media Queries.

Jeśli mówimy o prawdziwym RWD, to prawdę mówiąc często wgl nie używa się grida – patrz: Filament Group. Prawda jest taka, że w momencie przejścia na budowanie stron przy pomocy komponentów, grid staje się ciut anachroniczny. Bardzo trudno go połączyć także ze stronami/aplikacjami napisanymi w pełnej zgodności z założeniami BEM. Wówczas to rola danego komponentu/bloku narzuca bowiem sposób jego wyświetlania na stronie WWW.

BTW stylów – tylko i wyłącznie.

Jeśli mówimy o treści skalowanej na różne rozdzielczości, wszelkie szerokości najlepiej podawać w procentach - ale gdy wiesz, że przykładowo jakiś blok ma zawsze mieć określoną szerokość, to też nie bój się pixeli.

Powiedziałbym raczej, że w rem/em (oczywiście przy równoczesnym pozbyciu się ustalania bazowej wielkości czcionki). Natomiast piksele de facto nie mają prawa pojawić się w RWD – nie ma bowiem bloków o określonej szerokości! W prawdziwym RWD wszystko jest jak najbardziej płynne. Zamiast określonej szerokości, mamy stosunek proporcjonalny pomiędzy poszczególnymi elementami layoutu. Chyba jedyne miejsce, w którym piksele mogą się pojawić, to określanie domyślnej wielkości obrazków (w HTML, przy pomocy [width], [height] w celu optymalizacji procesu rysowania layoutu). Rzecz jasna domyślnej, bo obrazki też powinny się skalować.

Np. ustalamy na stronę główną wielkość czcionki 14px

Nie, nie ustalamy. Zamiast myśleć typu "ustawmy sobie 2rem od bazowego 16px" (w sumie tutaj można posługiwać się pikselami, bo i tak WSZYSTKIE ROZMIARY SĄ SZTYWNO OKREŚLONE!!), raczej powinniśmy myśleć "ustawmy sobie czcionkę 2 razy większą od domyślnej". Domyślnej, czyli tej, która albo jest ustawiona w przeglądarce, albo… użytkownik sam sobie ustawił (i właśnie dlatego zmieniać domyślnej czcionki się nie powinno).

Ale wracając do pxieli - jeśli coś niezależnie od innych wielkości ma być ustalone - warto je stosować (albo 'rem'y).

Jak już wspominałem, takich rzeczy być nie powinno.

Co do szerokości strony - czy ustalona czy 100% - zależy od projektu, jednak częściej spotykam się z rozwiązaniami dla contentu na max 1200px.

Tutaj optowałbym za rozwiązaniem typu max-width: 60rem, co pozwala na uzyskanie sensownej długości linii (~60 znaków).

Ogólnie to polecam poczytać blog Filament Group i sięgnąć po książkę Heydona Pickeringa, Inclusive Design Patterns (otwiera oczy, serio).

komentarz 29 października 2016 przez subterras Użytkownik (680 p.)

A miało być tak pięknie :D Ale dzięki wielkie za rozwiniętą odpowiedź. Teraz czas to wszystko ogarnąć :P Bardzo pomogłeś bo niby sporo wiedziałem i czytałem ale za dużo różnych rozwiązań się nagromadziło i opcji :P