Odziedziczyłem projekt po jakichś wariatach, którzy do media query zdefiniowali i używali 14 breakpointów, a style grupowali według media query, więc style dla jednego selektora są rozbite i trzeba scrollować jak głupiec, a do tego 10 poziomów zagnieżdżeń w scss i to w scopowanych stylach z unikalnymi nazwami klas XD Ogólnie tragedia. Chcę to posprzątać.
Jakich breakpointów używacie? Frameworki mają to bardzo różnie zdefiniowane.
W zasadzie to nie ma jakiegoś specjalnego znaczenia. 99% projektów tak na prawę wspiera tylko dwa rozmiary - mobile i desktop. Często nawet jak używają i 10 breakpointów, to tak na prawdę UI jest pisany pod dwa.
W swoich projektach zawsze robię 2 UI - mobile do 1023px, desktop od 1024px. Jeśli zachodzi potrzeba, to dodaję dodatkowy media query na 750px pod tzw. tablet, ale to tylko do jakichś pojedynczych przypadków, jak np. robi się za pusto na ekranie i trzeba jakieś elementy rozlać szerzej.
1programmer napisał(a):
@Riddle A gdzie jest twoim zdaniem granica między mobile i desktopem? 768px?
Nie ma jasnej granicy, często też klienci czegoś takiego nie wymagają. Userzy tabletów to jakiś 1% ruchu, jeśli w ogóle; więc większość klientów nie chce przepalać przebiegów na obsługę takiej niszy.
No dobra ale breakpointy robisz po coś nikt ci nie powie ile masz miec i jakie bo to zależy od tego jak ich uzywasz. Np każda aplikacja którą robie musi wyglądać dobrze na iphonie(H/V), ipadzie(H/V) i w na kompie w full hd.
@1programmer Wsparcie dla tableta pokrywa ci małe ekrany laptopowe i jak ktos pracuje przy podzielonym ekranie. Wiec IMO warto tak czy siak.
zależy od layoutu, rób tak żeby strona wyglądała cały czas dobrze, a przede wszystkim żeby była dostępna rozciągając okno od minimalnego rozmiaru do 4k. Breakpointy to leniwe rozwiązanie, prawdziwie responsive design nie ma twardych breakpointów, tylko co najwyżej min-width na poszczególnych elementach