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

question-closed CSS @media Rule - wasze doświadczenia

Object Storage Arubacloud
0 głosów
147 wizyt
pytanie zadane 31 marca 2018 w HTML i CSS przez wanderer Gaduła (3,710 p.)
zamknięte 2 kwietnia 2018 przez wanderer
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ć?
komentarz zamknięcia: Rozwiazane

1 odpowiedź

+2 głosów
odpowiedź 31 marca 2018 przez Kamil Naja Nałogowiec (27,490 p.)
wybrane 2 kwietnia 2018 przez wanderer
 
Najlepsza
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.
komentarz 1 kwietnia 2018 przez wanderer Gaduła (3,710 p.)

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?

 

komentarz 2 kwietnia 2018 przez wanderer Gaduła (3,710 p.)
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

Podobne pytania

0 głosów
1 odpowiedź 170 wizyt
pytanie zadane 1 sierpnia 2017 w Offtop przez kordix Gaduła (3,870 p.)
+3 głosów
4 odpowiedzi 1,068 wizyt
pytanie zadane 10 kwietnia 2019 w HTML i CSS przez mb-dir Mądrala (6,710 p.)
0 głosów
1 odpowiedź 273 wizyt
pytanie zadane 24 lutego 2023 w Inne języki przez Jerzy Użytkownik (930 p.)

92,694 zapytań

141,606 odpowiedzi

320,106 komentarzy

62,051 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.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...