Dzień dobry.
Mam pytanko. Piszę swoją prostą stronkę. I patrząc na inne strony, moja nie zachowuje się tak samo przy oddalaniu/przybliżaniu w oknie przeglądarki.
Inne strony zachowują się "sztywno". Przy oddalaniu/przybliżaniu cały czas trzymają ten sam rozmiar i nie rozjeżdżają się. Jak zbudować taką stronę?
W załączniku screen przykładowy.
Pozdrawiam
serek napisał(a):
Szczerze, nikogo nie obchodzi raczej, że strona przy zmianie zooma się trochę rozjedzie. A przynajmniej nigdy nie widziałem czegoś takiego w wymaganiach.
Oczywiście, że obchodzi, w wymaganiach nie masz ale klienci sprawdzają i zgłaszają to jako buga bo jest to bugiem, szczególnie ci na retinach, ci to potrafią cuda z zoomem robić.
@diego411: zrzut ekranu w załączniku pokazuje jakby rozpikselowaną grafikę (muszę maksymalnie oddalić, by była widoczna prawie nierozmazana). Czy na pewno o to chodziło?
Może opisz dokładniej, co się rozjeżdża, bo rozjeżdżanie się to jednak nie to samo, co rozpikselowanie. Tak samo zdjęcia ładowane w przeglądarce to nie to samo, co strony. Poza tym są różne technologie – nie spotkałem się, by goły CSS się rozpikselowywał, a rozjeżdżał – tak. Rozjeżdżanie się to naturalne zjawisko np. w przypadku kontenerów, gdy nie dać ich sztywnych wymiarów (np. kontenerowi body). Przy tym, użycie grida, flexa lub innych podobnych technologii z różnych frameworków może rozjechać samą treść (a kontenera już nie).
Przepraszam, wysłałem zły screen.
Może lepiej jak podam żywe strony i sami zobaczycie.
Chodzi o to że strona "psuje się" podczas przybliżania/oddalania.
Przykład poprawnej strony: https://www.odkryj-auto.pl/
Podczas oddalania/przybliżania, wiadomo zmienia się punkt widzenia ale zawartość jest wyświetlana w poprawny sposób.
Natomiast wchodząc na stronę np http://7rent.com.pl/ strona po oddalaniu/przybliżaniu przyjmuje dziwne kształty.
Na co zwracać uwagę przy pisaniu strony aby takich sytuacji nie było i strona była "sztywna" i wyświetlała się na różnych urządzeniach w poprawny sposób? (tak jak odkryj-auto).
Pozdrawiam
Natomiast wchodząc na stronę np http://7rent.com.pl/ strona po oddalaniu/przybliżaniu przyjmuje dziwne kształty.
Przyjmuje dziwne kształty najpewniej z uwagi na liczne media queries, które, jak widzę, są zdefiniowane (łącznie – 15 różnych przedziałów szerokości ekranu, choć oczywiście nie wszystkie dotyczą wszystkich elementów i niektóre się w sobie zawierają). Ale domyślam się, że założeniem tej strony jest to, że tak będzie działać, ponieważ kolejnym założeniem jest, że użytkownicy nie będą oddalać/przybliżać strony, a jedynie przeglądać ją na urządzeniach o różnych wielkościach ekranów.
Przykład poprawnej strony: https://www.odkryj-auto.pl/
Tutaj media queries wykorzystywanych jest 3 media queries, w tym tylko jedno zależne bezpośrednio od szerokości ekranu.
Można by więc sobie zadać pytanie, czy jest sens w ogóle określać, by strona działała tak lub inaczej. Jeśli masz założenie, że przybliżanie/oddalanie będzie wykorzystywane – jak najbardziej jest sens. Najprostszym rozwiązaniem byłoby chyba po prostu wykorzystanie właśnie mniejszej liczby media queries. Optymalna liczba zależy od liczby ekranów o różnych wielkościach, w jakie celujesz.
Trochę inaczej byłoby, gdybyś chciał wykorzystywać względne jednostki wielkości w CSS (np. em, rem, vh, %) oraz dynamiczne układy treści (grid czy flexbox). Zakładam, że wtedy, przy odpowiednim projekcie, nawet jedna deklaracja media query nie byłaby potrzebna – ale. Zarówno domyślne czcionki, jak i kontenery dostosowałyby się same do wielkości ekranu, więc choć przeskoków explicite zdefiniowanych być nie byłoby (jak media query), to elementy po prostu zmieniałyby swoje rozmiary same (implicite) w różnych momentach.
Moim zdaniem, dobrze jest zrobić nie za wiele media query, nie za wiele używać względnych jednostek wielkości, używać grida i flexboxa, no i kontrolować swój CSS (tzn. np. używać niewielu zewnętrzych arkuszy stylów). Używanie zewnętrznych arkuszy czy całych bibliotek może pomóc stronie wyglądać lepiej i bardziej profesjonalnie (vide Bootstrap). Niemniej, należałoby się zawsze zastanowić przed ich użyciem, na ile swobody pozwala dana biblioteka (Bootstrap – na wiele) – oraz czy w przypadku wystąpienia niezgodności z projektem/błędu będzie łatwo go znaleźć i naprawić (w Bootstrapie – zależy od komponentu).
PS. Co do Bootstrapa jako takiego – mnie on do gustu nie przypadł, ale być może Tobie przypadnie.
