Identyczna strona na każdym urządzeniu

Identyczna strona na każdym urządzeniu
S8
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 14
0

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 :P Dziękuję z góry za zainteresowanie i pomoc :)

n0name_l
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 2412
0

Użyj bootstrapa...

S8
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 14
0

Na innej stronie wykorzystałem bootstrapa więc orientuję się w temacie. Myślę, że używanie dużego frameworka do tak małej stronki, to jak kiedyś na forum czytałem śmieszne porównanie. Jak celować z armaty do mrówki :) Więc może zna ktoś jakąś wskazówkę do CSS albo jakąś wtyczkę pod JQ albo skrypcik.

dzek69
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Rzeszów
0

Jak ty chcesz zrobić to 100% identycznie (czyli tak jakbyś skalował obrazek) to porzuć ten głupi pomysł. Przecież urządzenia mogą być ustawione pionowo i poziomo. To już wyklucza Twój pomysł z realizacji.

S8
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 14
0

Chciałbym :) Ale to poważna akcja i szefowa ode mnie tego wymaga :) niestety więc muszę to zrobić i szukam pomocy. Przy pomocy media queries jestem w stanie zrobić, aby dobrze wyglądało na każdym urządzeniu przy ja wiem z 10 media queries ale jak ktoś chwyci przeglądarkę i ją zmniejszy, to już gorzej :)

Patryk27
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Wrocław
  • Postów: 13042
0

Uświadom szefową, że to idiotyczny pomysł :P

S8
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 14
0

Dzięki za szczerość ale to mi nie pomoże.

dzek69
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Rzeszów
0

Ale zrozum, to się NIE DA, żeby było identycznie, a Ty na siłę próbujesz to zrobić. Chyba, że chcesz zrobić puste marginesy u góry i na dole, jak ktoś przerzuci urządzenie w pion - ale to będzie nieczytelne!

Edit: Daj szefowej poziome zdjęcie i pionową ramkę. Każ jej tak to zdjęcie wsadzić tak, żeby było takie samo i żeby pasowało do ramki.

S8
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 14
0

Da się :) Zminimalizowałem ilość tekstu w html, a jako obrazek dołączyłem z tekstem i już znacznie lepiej to wygląda, a jeśli chodzi o pion w urządzeniach mobilnych to funkcja w CSS3: @media all and (orientation:portrait). Zresztą dużo mówi poradnik: http://webroad.pl/html5-css3/643-media-queries-w-przykladach i się udało :) obrazki należy dać do rodzica z klasą position:relative, a dzieci(czyli wszystkie obrazki) z klasą position:absolute i ustawiać :) co prawda jak zmniejszam okno przeglądarki, to ciutkę się rozchodzi ale punkty kontrolne Media queries w miarę dają radę więc jest ok :) problem rozwiązany :)

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.