CSS @media Rule - wasze doświadczenia

Question

jak robię stronę internetową w kodzie bez użycia żadnego cms'a ani narzędzia do wizualnego tworzenia to oczywiście napotkałem na konieczność używania w kodzie css media rule.
Do sprawdzania wyświetlania niektórych sekcji i elementów posługuje się symulatorem http://responsivedesignchecker.com/  i muszę przyznać ze nawet się sprawdza.  Tylko że przy niektórych rozdzielczościach niektóre elementy strony potrafią się nieźle rozjechać przy użyciu małej liczby breakpointów media rule. Czy to jest dobra praktyka, żeby niektóre sekcje czy elementy strony opisywać osobno dla np. 1366, 1440, 1600-1680, 1920? Ogólnie to się sprawdza, bo wyświetla się wszystko zwykle dobrze, ale czy to nie jest pewnego rodzaju nadmiarowa praca? Może ktoś doradzić?

Answer 1

Jeśli elementy strony są dobrze przemyślane (na przykład nie mają na sztywno ustawionych wymiarów), to nie trzeba używać tylu breakpointów. Gdy elementy mocno rozjeżdżają się, to jasny sygnał, że coś jest nie tak z css.

Bootstrap 3 używa 3 breakpointów, wersja 4 - już 4, ale dotyczą one niższych rozdzielczości niż te, które opisałeś.

Responsywność lepiej jest sprawdzać w oknie przeglądarki (np narzędziem Google Chrome) i na smartfonie niż jakimiś wynalazkami.

Comments

Rozumiem, po prostu mam wątpliwości jeszcze.  Jak radziłbyś zrobić sekcje w stylu :

2 kolumny.  W lewej teksty w prawej obrazek. Z tym że tło prawej kolumny pod obrazkiem musi być trójkątem, ukosem. (załącznik). W pierwszej kolejności próbowałem zrobić że img+background to jeden element background (bez podziału na zdjęcie i tło), tylko wtedy przy mniejszych monitorach kolumna z tekstem byla dużo dłuższa od kolumny prawej i krótko mowiąć rozjeżdzało się to. Potem spróbowałem zrobić, że  img+ te zielone tło to w całości single image. i przy uzyciu tych breakpontów to sie wszedzie (tam gdzie załapało się w zakresy) dobrze wyświetlało - ale juz wiem ze to jest złe rozwiązanie..

Jak w tego typu sytuacjach radzić sobie z takimi ukośnymi tłami, żeby to wyglądalo przyzwoicie na różnych urządzeniach desktopowych?

 

---

Jednak wystarczy wylaczyc sztywna wysokosc sekcji np nie uzywac juz height: 90vh; i rozdzielic ukosne tlo i zdjecie na 2 osobne elementy. Wystylizowac zdjecie czyli np jego pozycje w danym divie zeby np. Wyswietlalo sie zawsze od dolu diva i uatawic rozsadnie wysokosc zdj i to wystarczy zeby wyswietlalo sie ok bez breakpointow. Krotko mowiac baaaardzo przekombinowalem i nie wiem tylko po co :D a opisuje rozwiazanie dla zamkniecia tematu zeby inni tez wiedzieli :) pozdro