Forum hostingu CBA.pl

Witam, mam wykonać stronę, a wszystko mi się rozjeżdża. Strona to pewna bajeczka, historyjka, która ma w sobie kilka obrazków nałożonych na większy obrazek i kilka wyrazów. Nie może być paska przewijania prawego więc musi mieścić się w wymiarach okna przeglądarki. Pytanie brzmi. Jak zrobić, aby identycznie strona wyglądała na każdym urządzeniu. Owszem. Są do tego media queries w CSS3 i użycie procentowo wszystkego. Znalazłem nawet rozwiązanie użycia do czcionki(najgorzej się rozjeżdża) font-size: wartości "vw" i"vh", ciekawie ale jednak gdy chcę pomniejszyć przeglądarkę(nie rozdzielczość), czyli zwężyć albo pomniejszyć od wysokości, to się rozpiepsza na dobre. Więc tych media queries trzeba by było setki conajmniej 1500 linii kodu CSS3 media queries. Macie może jakieś rady ? Czasu też mało na domiar złego Dziękuję z góry za zainteresowanie i pomoc

Koniecznie musi się składać z mniejszych obrazków?

Jeśli tak no to background-size:100%; obrazki tych samych wymiarów z przezroczystym polem i tekst w divach z wartościami procentowymi.

Jeśli nie to może flash?

@szymon_89

media w css nie są do tego... zresztą samo css nie jest... zresztą co tam...
klasy, struktury, obiekty, funkcje i cała reszta jest stworzona właśnie po to aby NIE pisać czegoś 1500 razy.
...więc tu już by była pała.

szymon_89 pisze:Pytanie brzmi. Jak zrobić, aby identycznie strona wyglądała na każdym urządzeniu.

Wydaje mi się że źle zrozumiałeś pytanie (a diabeł tkwi w szczegółach), względnie zostało ono błędnie zadane. Ale załóżmy że pytanie jest właśnie takie i traktujemy to dosłownie czyli że ma identycznie (?! no weź...) wyglądać, w różnych rozdzielczościach to jedyne sensowne jest skalowanie.

Jeśli nie jest określone jakich technologi mamy użyć (a nie jest), to bierzemy pierwsze z brzegu, i ...to da się zmieścić w jednej linii jquery.

np. $(window).resize(function() { cośtam }); z użyciem CSS transform: scale(x,y);
albo jeszcze prościej było by użyć fit.js dzięki czemu odpada problem czy skalować do szerokości czy do pionu.

Ale suma sumarum podejrzewam że pała i tak będzie bo pewnie pytanie było tak zadane aby wymusić użycie "czegoś co było uczone" (a nie, jquery czyli "sprytnie, sprytnie, ...ale źle!!!") w ramach testu "czy dobrze weszło to co było uczone", i albo zostało źle zadane albo co gorsza źle zrozumiane...

Jeżeli z kolei chodziło o użycie media query, to powszechnie używa się (czytaj: ja czasem używam) połączenia stałych szerokości z fluidem i media query do małych modyfikacji pojedynczych elementów, bo nie chodzi o skalowanie wszystkiego do mikro rozmiarów na ekranie np. szerokości 300px tak że nic nie będzie widoczne ani "klikalne" ale "się zmieści".

czyli

szerokość ekranu 1280px
xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxx
coś 33%............coś 33%............coś 33%...........menu Xpx.... = fajnie

szerokość ekranu 1024px
xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxx
coś 33%............coś 33%............coś 33%...........menu Xpx.... = też fajnie

szerokość ekranu 800px
xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxx
coś 33%............coś 33%............coś 33%...........menu Xpx.... = już nie fajnie bo te 3 pierwsze będą za wąskie dlatego fajnie by było zrobić 2 kolumny - więc media query zmieniamy tylko 1 parametr - coś 50% i w rozdzielczości 800px mamy

szerokość ekranu 800px
xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxx
coś 50%...............coś 50%...............menu Xpx.... = fajnie
xxxxxxxxxxxxxxxxxx = a to wskoczyło do następnej linii, pięknie.
coś 50%

to wszystko jeszcze owijamy w diva ze stałą szerokością i auto marginesem i też zmieniamy skokowo media querem w zależności od 800, 1024, 1280 itd.
tylko jedna zmiana w jednym elemencie width z 33% na 50% i w wraperze i jak ładnie Gdzie i po co 1500 linii...

Jeszcze raz (i to pewnie będzie oceniane) - w zmieszczeniu czegoś w różnych rozdzielczościach (ekranach) nie chodzi o przeskalowanie ale o "zmieszczenie / rozmieszczenie" treści w sensowny sposób, gdzie na malutkim ekranie, przykładowo klawisze nie tylko nie są mniejsze ale wprost większe aby można je było swobodnie kliknąć paluchem.

Dzięki za wyczerpującą odpowiedź. Poradziłem sobie już sam z problemem. Tekst najbardziej się rozjeżdżał więc dałem go w obrazek. Wszystkie obrazki mają rodzica o klasie: position: relative, a dzieci: position: absolute i ustawione rozmiary, a także height i wszystko w procentach. Trochę punktów kontrolnych musiałem użyć ale niewiele, bo od FULL HD rozpoczynałem pisanie a punkty w HD+,HD, a na urządzenia mobilne ciutkę inny obrazek i mniej pod obrazków, bo nie było takiej potrzeby. Dużo mówi artykuł: http://webroad.pl/html5-css3/643-media- ... rzykladach, szczególnie fajna funkcja to: @media all and (orientation:portrait), bo w pionie w urządzeniach było by małe, a tak dla piony jest znowu inny obrazek w miarę fajnie się skaluje, szefowa zadowolona Nie jestem uczniem, tylko nie dawno zacząłem naukę i zarazem pracę i muszę szybko nadganiać, jestem samoukiem i spędzam dziennie ponad 10h czasu na douczaniu się, niestety weekendy też Dziękuję za artykuł, bo wyczerpująca odpowiedź, bo i w nim są ciekawe rzeczy

Wielka szkoda że od dawna nikt nic nie napisał w tym wątku.Mnie to się po prostu w ogóle nie podoba.

_________________________________________________
rolety wewnetrzne częstochowa

mariusz33332 pisze: Wielka szkoda że od dawna nikt nic nie napisał w tym wątku.Mnie to się po prostu w ogóle nie podoba.

_________________________________________________
rolety wewnętrzne łódź

Yyy.. co Ci się konkretniej nie podoba?