Szerokość strony w różnych rozdzielczościach/na telefonach

pytanie zadane 1 listopada 2016 w HTML i CSS przez Maciej Kawka Nowicjusz (140 p.)

Cześć,

Jako, że robię z przyjaciółmi stronę, której wykonanie zlecił nam nauczyciel w zamian za ocenę celującą, wzieliśmy się od razu do roboty. Ja jak łatwo się domyślić odpowiadam za frontend, jednak jestem aktualnie na poziomie przynajmniej początkującym :D

Kod html i css załączam tutaj:
http://pastebin.com/MTwKPhqE -> html
http://pastebin.com/zjkgVtcU -> css

aby było łatwiej zobaczyć co jest nie tak podaje także cały folder strony: http://www108.zippyshare.com/v/19K2Z0Xq/file.html

A teraz przejdźmy do problemu:
Nie jestem w stanie wpaść na pomysł jakie szerokości ustawić by strona po zmniejszaniu okna nie niszczyła się, mówię tu o chociażby logu tekstowym, które gdy zmniejszę okno przeglądarki każde słowo przenosi tak jakby do kolejnego wiersza, a co za tym idzie wychodzi poza background-color tegoż loga
tak samo jest z panelem logowania które to nakłada ikone na ikone, pola zmniejsza za bardzo (wszystko także wychodzi poza background-color)

Jeśli chodzi o mój sposób to wydaje mi się, że nie ma problemu bo można przecież ustawić szerokości w pikselach a nie w %, jednakże jeden z kumpli biorący udział w tym projekcie, stwierdził, że ma to być zrobione procentami, bo jak będą ustawione szerokości w pikselach to na mniejszych rozdzielczościach i w telefonach będzie to wyglądać źle.

Stąd moje pytanie, co robić?

7 odpowiedzi

odpowiedź 1 listopada 2016 przez niezalogowany

media queries

komentarz 1 listopada 2016 przez Maciej Kawka Nowicjusz (140 p.)

można jaśniej? :D

2	komentarz 1 listopada 2016 przez niezalogowany Przy danej szerokości przeglądarki (ściślej rzecz ujmując: viewportu), dla poszczególnych elementów możesz ustawić 'indywidualne' style. http://lmgtfy.com/?q=css+media+queries

odpowiedź 1 listopada 2016 przez Kondzix16 Początkujący (470 p.)

odpowiedź 1 listopada 2016 przez JakubLabudda Użytkownik (640 p.)

odpowiedź 1 listopada 2016 przez jaca121212 Nałogowiec (40,760 p.)

Jako że jesteś początkujący to powiem tak

dla

<div id="container">

nie pisz styli w ten sposób

 
#container
{
    width: 45em;
    min-width:100%;
    margin-left: auto;
    margin-right: auto;
}

tak jak to na swojej stronie zrobiłeś (zamians ID dal class-ę i ostyluj tą ową class-ę )

Jaka jest tutaj logika w tych stylach

    width: 45em; = 720px;
    min-width:100%; = 100%

już na samym wstępie byś się wkopał

następny błąd

<img src="img/dziennik.png" style="float:left" />

gdzie jest alt ?

<img src="img/dziennik.png" alt="ukaże się tekst gdy obrazek nie zostanie załadowany" />

jak już chcesz na siłę dać tego

float:left;

do obrazka to zrób to w arkuszu styli

img
{
float:left;
}

można by było więcej się dopatrzeć błędu ale pozostanę na tych.

Gdy opanujesz w stopniu dostatecznym HTML-a to zastanów się nad przejściem do HTML 5

komentarz 6 listopada 2016 przez Maciej Kawka Nowicjusz (140 p.)

Dzieki za cenne rady :)

odpowiedź 2 listopada 2016 przez pablop76 VIP (123,180 p.)

Kumpel ma rację. Jeżeli strona ma się dostosowywać do wielkości okna to musisz zastosować wartości procentowe, czyli stworzyć płynny layout., czyli taki, który zajmuje cała dostępną powierzchnię, niezależnie od jej wielkości. Podstawa to podzielenie strony na kolumny o szerokościach określonych wartościami procentowymi. Dodatkowo zastosować płynne obrazy, żeby nie wylewały się w przypadku braku miejsca. Płynna typografia ( firet czyli jednostka em lub wartości procentowe, lub obydwie metody). Jeżeli to nie wystarczy bo np: kolumny po zmniejszeniu okna będą za wąskie to należy jeszcze zastosować zapytania medialne, czyli media queries, dzięki którym możemy dynamicznie zmienić formatowanie dla rożnych urządzeń. Można powiedzieć, że to osobna sekcja arkusza stylów.

komentarz 6 listopada 2016 przez Maciej Kawka Nowicjusz (140 p.)

Właśnie o kolumnach wspominał. Dzięki! :D

odpowiedź 2 listopada 2016 przez tonyone Użytkownik (530 p.)

W CSS musisz użyć @media queries i do każdej rozdzielczości dostosować style.

np. jeżeli chcesz ustawić odpowiednie style dla szerokości mobilnej użyjesz:

@media (max-width: 425px) {twóje style css}

dla tableta:

@media (max-width: 768px) {twoje style dla tej rozdzielczości}

itd. dla różnych rozdzielczości.

Poszukaj Sobie standardowych rozdzielczości na odpowiednie urządzenia i do każdej szerokości ustawiaj inne style. A później metodą prób i błędów zmieniaj style np. dla mobile zwiększ wymiary elementu tak żeby zajmował większą powierzchnie, przykładowo na komputerze będziesz miał logo width: 20% a na mobile width: 100%.