Skalowanie strony w przeglądarce

pytanie zadane 30 listopada 2015 w HTML i CSS przez Anonimus Nowicjusz (140 p.)

Witam uczę się pisania stron w HTML CSS w pełnym oknie przeglądarki strona wygląda w miarę okej ale jeśli zmniejszę okno przeglądarki wszystko się rozwala w jaki sposób mogę to naprawić lub zapobiec w kolejnych stworzonych stronach ?

4 odpowiedzi

odpowiedź 30 listopada 2015 przez Józef Mądrala (5,200 p.)

odpowiedź 30 listopada 2015 przez migacz100 Mądrala (5,410 p.)

Pod każdym tego typu postem wklejam to:

http://www.w3schools.com/css/css_rwd_intro.asp

(zero wyjątków);

komentarz 1 grudnia 2015 przez Comandeer Guru (607,060 p.)

A ja zawsze odnośnie W3Schools wklejam to: https://forum.pasja-informatyki.pl/34559/w3schools-nie-szerzmy-falszywej-propagandy?show=34559#q34559 (również zero wyjątków ;))

Serio: są lepsze zasoby. Choćby nawet te od Google → https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en

komentarz 1 grudnia 2015 przez Eryk Andrzejewski Mędrzec (164,260 p.)

Miałem to wklejać a patrzę, że Comandeer sam to zrobił :)

https://forum.pasja-informatyki.pl/34559/w3schools-nie-szerzmy-falszywej-propagandy

komentarz 1 grudnia 2015 przez migacz100 Mądrala (5,410 p.)

Akurat to tam co wkleiłem jest dość sensowne, tak jak i dalsze części RWD :/*

komentarz 1 grudnia 2015 przez Comandeer Guru (607,060 p.)

W praktyce może to i działa, ale są tam popisane głupoty…

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

Totalna bzdura. Ustawienia viewportu nie są częścią standardu HTML5, bo dotyczą sposobu prezentacji, nie zaś wyrażania treści. Z tego powodu powstał odpowiedni moduł CSS, gdzie zdefiniowano @viewport (które niestety działa obecnie tylko w IE 11 i Edge). meta[name=viewport] to chory wymysł Apple'a, który stał się "standardem" tylko i wyłącznie dzięki dominacji iPhone'a na rynku mobilnym.

http://www.w3schools.com/css/css_rwd_grid.asp → co ma grid do RWD?

A responsive grid-view often has 12 columns

Kolejny "standard", tym razem ustanowiony przez BS…

* {
    box-sizing: border-box;
}

To było best practice 2 lata temu. Obecnie za najlepszą praktykę uznaje się dziedziczenie box modelu po rodzicu:

*, *:before, *:after {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
}

I tak - pseudoelementy też powinny mieć określony box model (czego na W3S nie robią).

http://www.w3schools.com/css/css_rwd_mediaqueries.asp → breakpoints to już bardziej AWD (Adaptive Web Design), który zawsze jest mylony z RWD. Wypadałoby to wyjaśnić.

Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices).

Bzdura. Strona będzie się na mobilnych wyświetlać wolniej niż na desktopie i nie jest to zależne od jakichś sztuczek w CSS. Perceived performance też z reguły jest gorsze. Poza tym pojęcie "mobile first" przykuwa uwagę do konkretnego typu urządzenia (ba, TO JEST NAWET TAM NAPISANE), a podstawowa zasada Sieci brzmi: device-agnostic. Stąd od dawna jest popularne bardziej poprawne określenie content first, czyli skupianie się na poprawnym wyświetlaniu prymarnej treści i dodawaniu kolejnych poziomów treści adytywnej.

You should also define an <img> element for browsers that do not support the <picture> element.

Kolejna bzdura. Element picture>img jest WYMAGANY PRZEZ SPECYFIKACJĘ, bo to w nim renderowany jest obrazek wybrany z picture>source (inaczej żadna przeglądarka nie zaimplementowałaby picture). No i nie ma nic o tym, co robi [srcset] i [sizes] oraz o tym kiedy użyć czego, więc taki opis responsywnych obrazków to można sobie tak naprawdę wsadzić. Nie to, co Opera: https://dev.opera.com/articles/responsive-images/

http://www.w3schools.com/css/css_rwd_videos.asp → tego to już wgl nie skomentuję…

http://www.w3schools.com/css/css_rwd_frameworks.asp → a tu już leci pseudoreklama ;)

A na koniec: http://www.w3schools.com/css/css_rwd_viewport.asp (3 najważniejsze punkty w Size Content to The Viewport) vs https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/size-content-to-the-viewport?hl=en (sekcja TL;DR) → to jest po prostu żałosne…

komentarz 1 grudnia 2015 przez migacz100 Mądrala (5,410 p.)

Spokojnie to tylko tekst w internecie.

komentarz 1 grudnia 2015 przez Comandeer Guru (607,060 p.)

Ja Was po prostu nie rozumiem… Podałeś pewną stronę, która znana jest ze złej jakości treści. Wskazałem Ci to, to stwierdziłeś, że akurat to jest dobrej. Więc przejrzałem to i jednak nie jest dobrej. To Ty teraz odwracasz kota ogonem…

Nie, nie spokojnie, bo przez tego typu materiały w Sieci później mamy setki klepaczy kiepskiego kodu, a nie webdevów z prawdziwego zdarzenia. I tym samym szkodzi się całej Sieci.

komentarz 1 grudnia 2015 przez migacz100 Mądrala (5,410 p.)

Nie odwracam kota ogonem ja podałem poprostu coś od siebie a ty od siebie; a to co wybierze ktoś czytający to co się tu odbywa nie zależy od stanu uniesienia emocjonalnego w komentarzu.

komentarz 1 grudnia 2015 przez Comandeer Guru (607,060 p.)

Czyli mam mieć totalnie wywalone, bo i tak strzępie se język na darmo? ;)

komentarz 1 grudnia 2015 przez migacz100 Mądrala (5,410 p.)

A rób co uważasz za słuszne średnio mi powinno być cokolwiek do tego; mimo wszystko dobrze, że się wypowiadasz bo masz doświadczenie i wiesz o czym mówisz aczkolwiek przelewanie frustracji w komentarze nie jest dobrym zabiegiem.

komentarz 1 grudnia 2015 przez Comandeer Guru (607,060 p.)

Dość ciekawe gdzie tam widzisz frustrację. To jest po prostu stwierdzenie tego, że dana treść jest, lekko mówiąc, do bani. Bardziej mnie frustruje fakt, że ktoś próbuje mi wmówić frustrację :P