• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Skalowanie strony

VPS Starter Arubacloud
0 głosów
7,992 wizyt
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

0 głosów
odpowiedź 28 czerwca 2015 przez Comandeer Guru (599,730 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 (599,730 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 (599,730 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 

0 głosów
odpowiedź 28 czerwca 2015 przez Czort Nałogowiec (32,500 p.)
Użyć media querries i sprawdzić jak wygląda w różnych rozdzielczościach (zmniejszając/zwiększając okno przeglądarki).
0 głosów
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.

Podobne pytania

+1 głos
3 odpowiedzi 1,192 wizyt
pytanie zadane 25 października 2015 w HTML i CSS przez DariuszH Gaduła (3,100 p.)
0 głosów
1 odpowiedź 905 wizyt
0 głosów
4 odpowiedzi 1,800 wizyt
pytanie zadane 30 listopada 2015 w HTML i CSS przez Anonimus Nowicjusz (140 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...