Identyczna strona na każdym urządzeniu
Identyczna strona na każdym urządzeniu
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
-
- Posty: 528
- Rejestracja: 26 kwie 2011, 16:33:42
- Strona na CBA.pl: 4zywioly.c0.pl
- Płeć:
- User Agent:
- Kontakt:
Re: Identyczna strona na każdym urządzeniu
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?
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?
Re: Identyczna strona na każdym urządzeniu
@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.
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.
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.
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.szymon_89 pisze:Pytanie brzmi. Jak zrobić, aby identycznie strona wyglądała na każdym urządzeniu.
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.
{$signature}
Re: Identyczna strona na każdym urządzeniu
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
-
- Posty: 1
- Rejestracja: 03 lip 2019, 08:02:53
- Płeć:
- User Agent:
Identyczna strona na każdym urządzeniu
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
_________________________________________________
rolety wewnetrzne częstochowa
-
- Posty: 3
- Rejestracja: 15 paź 2019, 13:55:58
- Płeć:
- User Agent:
- Kontakt:
Identyczna strona na każdym urządzeniu
Yyy.. co Ci się konkretniej nie podoba?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ź
- endriu888
- Obsługa CBA
- Posty: 1893
- Rejestracja: 23 sty 2012, 21:02:33
- Strona na CBA.pl: katalogfirm.c0.pl
- Płeć:
- User Agent:
- Kontakt:
Identyczna strona na każdym urządzeniu
Czy wiesz, że:
- W Panelu CBA w sekcji "wsparcie" jest dedykowany system ticketów (obsługi technicznej)
- Odpowiadamy na Forum oraz na adres mailowy obsluga(malpa)cba.pl
- Jesteśmy również na Facebooku! Znajdź nas na facebook.com/hostingcba | cba.pl