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 :)
Użyj bootstrapa...
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.
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.
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 :)
Uświadom szefową, że to idiotyczny pomysł :P
Dzięki za szczerość ale to mi nie pomoże.
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.
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 :)