Skalowanie strony

pytanie zadane 28 czerwca 2015 w HTML i CSS przez marcin_kub Obywatel (1,420 p.)

Witam!

Otóż mam taki mały problem z moją stroną: http://sieci.cu9.co

Na moim laptopie wszystko prezentuje się perfekcyjnie, jednak w momencie próby odpalenia tej strony na innym komputerze o innej rozdzielczości wygląd się psuje.

Moje pytanie jest następujące: co musiałbym zrobić, aby na każdym urządzeniu strona prezentowała się w ten sam sposób?

http://postimg.org/image/3o2e0a1hf/

3 odpowiedzi

odpowiedź 28 czerwca 2015 przez Comandeer Guru (606,240 p.)
wybrane 29 czerwca 2015 przez marcin_kub

Najlepsza

Pozycjonowania absolutnego używa się w ostatecznej ostateczności. Jak chce się go użyć, to najlepiej w elemencie pozycjonowanym relatywnie i z określonymi wymiarami. Wówczas co prawda strona nie będzie się skalować, ale powinna się nie roxpadać.

Ogólnie warto zacząć myśleć responsywnie, czyli nie wymiarami a proporcjami. Dużo rzeczy można zrobić po prostu przepisując stronę na procenty. Resztę rzeczy można ogarnąć przy pomocy media queries

komentarz 29 czerwca 2015 przez marcin_kub Obywatel (1,420 p.)

Jeśli dobrze rozumiem, używając @media queries będę mógł dopasować do wybranej skali rozdzielczości ekranu rozmiar i sposób rozmieszczenia danego elementu, zgadza się?

Mam jeszcze jedno pytanie, czy użycie #nazwa w head i później w body <div id="nazwa"></div> jest poprawne?

I jeszcze zrobiłem takie coś: https://drive.google.com/file/d/0Bz-j62Sk_ChNY3lidXZqSGdLM0U/view?usp=sharing

Nie wiem czemu przy powiększaniu i zmniejszaniu ta tabelka wychodzi mi poza ramkę wzdłuż i wszerz. Przy okazji psują mi się przy zmianie rozdzielczości poniższe "tabele". Macie jakąś poradę?

komentarz 29 czerwca 2015 przez Comandeer Guru (606,240 p.)

Jeśli dobrze rozumiem, używając @media queries będę mógł dopasować do wybranej skali rozdzielczości ekranu rozmiar i sposób rozmieszczenia danego elementu, zgadza się?

Tak

Mam jeszcze jedno pytanie, czy użycie #nazwa w head i później w body <div id="nazwa"></div> jest poprawne?

Nie do końca rozumiem pytanie - możesz coś więcej powiedzieć?

Co do tabel: one z zasady nie są responsywne i trza ciut pokombinować, np. wsadzić w div, który ma overflow: auto i odpowiednie wymiary albo coś typu: https://css-tricks.com/responsive-data-tables/

komentarz 29 czerwca 2015 przez marcin_kub Obywatel (1,420 p.)

Już próbowałem z tym overflow i niestety im bardziej przybliżam, tym pasek do przewijania staje się większy, a tego chcę uniknąć. Zrodziło mi się kolejne pytanie: na wielu popularnych stronach zauważyłem, że z każdym przybliżeniem elementy strony zachowują stałe położenie, lecz zmienia się ich rozdzielczość, znaczy stają się bardziej rozmnazane itp. Czy jest na to specjalny skrypt, czy oni też dopasowywali to na tej zasadzie, co ja. Choćby za przykład może posłużyć to forum. Po prostu chciałbym uzyskać taki efekt, że nie ważne ile się oddali/przybliży, strona i jej elementy będą w mniej więcej tym samym, tj. bez nachodzenia na siebie, bez wychodzenia tekstu poza ramkę. Dzięki za pomoc.

komentarz 29 czerwca 2015 przez Pablo Początkujący (300 p.)

zmniejszanie/scalowanie regulujesz za pomoca atrybutow min-height min-width :) hmm ;) chyba ze sie pomylilem :) aaa wielkosc kafelkow ( elementow ) ustawiasz nie w px a w %...

poza tym wiekszosc stron jest robiona na grid960, czyli umieszczasz wszystkie elementy w przypisanych komorkach, taka mega tabelka, z tym ze nie jest tabela :)

zobacz jak dziala bootstrap, poza tym mozesz dodac w css inne zachowanie stylow, za pomoca : @media screen and (max-width: 800px), @media screen and (max-width: 480px) i tam dodatkowo stylizujesz kafeliki/segmenty ) dla innych urzadzen...

komentarz 29 czerwca 2015 przez Comandeer Guru (606,240 p.)

poza tym wiekszosc stron jest robiona na grid960, czyli umieszczasz wszystkie elementy w przypisanych komorkach, taka mega tabelka, z tym ze nie jest tabela :)

Jeszcze 2-3 lata temu bym się zgodził; obecnie niespecjalnie

z każdym przybliżeniem elementy strony zachowują stałe położenie, lecz zmienia się ich rozdzielczość, znaczy stają się bardziej rozmnazane itp

Tak, wszystko jest machnięte na media queries

odpowiedź 28 czerwca 2015 przez Czort Nałogowiec (32,500 p.)

odpowiedź 29 czerwca 2015 przez Michał1290 Początkujący (330 p.)
edycja 6 lipca 2015 przez Michał1290

Według mnie powinieneś zmienić szerokość swojej strony. Załuszmy że standardowy urzytkownik dysponuje rozdzielczością przynajmniej 1024×768 lub większą.

komentarz 29 czerwca 2015 przez marcin_kub Obywatel (1,420 p.)

Co masz na myśli? Możesz jaśniej?

komentarz 30 czerwca 2015 przez Michał1290 Początkujący (330 p.)

Chodzi mi o to, że prawie każdy urzytkownik dysponuje rozdzielczością ekranu przynajmniej 1024x768 pikseli lub większą 1366x768 px albo 1920x1080 px. Czyli komfortowo na każdym ekranie zmieści się strona o szerokości (podaje przykładową wartość) np. 1000px. Bo zauważ, że w każdej rozdzielczości (chodzi mi o szerokość 1024px, 1366px, 1920px) ta strona będzie się mieściła.