rozdzielczość Full HD

pytanie zadane 22 października 2016 w HTML i CSS przez webpasion Nowicjusz (230 p.)
edycja 22 października 2016 przez Patrycjerz

Witam,

mam taki problem, zrobiłem stronę i niby jest wszytko ok, ale jak ją ostatnio otworzyłem u kuzyna (którego gorąco pozdrawiam) strona raptem zrobiła się maluteńka (tak jakby ktoś użył zooma) a w szczególności duże są marginesy dolny lewy i prawy. Strona otwierana była na komputerze o rozdzielczości FULL HD, nie wiem czy to ma znaczenie. Ja robiłem tą stronę na kompie o rozdzielczości 1024x768 i u mnie wygląda ładnie. Proszę o pomoc. Jak są jakieś pytania niezwłocznie odpisze. Dziękuje wszystkim.

<BODY>

<div id="container">              
<div id="topbar"></div>        
<div id="sidebar"></div>

<div id="content"></div>

  <div id="footer"></div>
</BODY>
</HTML>

body{
    margin-left: auto;
    margin-right: auto;
    background-image: url("galeria/tlo.png");
    font-family: 'Lato', sans-serif;
}
#container{
    margin-left: auto;
    margin-right: auto;
    width:900px;
    margin-top: 10px;
    height: auto;
}#topbar{
    margin-top: 20px;
}
#sidebar{
    float: left;
    width:200px;
    height:300px;
    padding:20px;
    background-color:     #b2b2b2;
    text-align: center;    
    font-size: 18px;
    border-right: 2px dotted #666666;
}

#content{
    float: left;    
    width: 500px;
    background-image: url("galeria/zwyk_baner1.png");    
    height: 300px;
    text-align: justify;
    overflow:scroll;
    overflow-x:hidden      
}#footer{
    background-color: black;    
    margin-top: 340px;
    width: 900px;
    height: 60px;    
}

3 odpowiedzi

odpowiedź 22 października 2016 przez Michau Xlow Pasjonat (15,190 p.)

odpowiedź 22 października 2016 przez IBB Gaduła (3,020 p.)

Nadałeś elementom swojej strony sztywne wymiary (w px), niezależne od wielkości ekranu, na którym strona jest wyświetlona. Np. container ma szerokość 900px - znaczy to, że zawartość Twojej strony będzie zawsze szeroka na 900px, niezależnie od tego, czy oglądasz ją na telefonie, tablecie, czy wielkim monitorze o dużej rozdzielczości.

Na Twoim komputerze strona wyglądała ok, bo robiąc ją dostosowałeś jej wymiary do swojego monitora (1024px x 768px). Sprawdziłeś jak wygląda na telefonie albo tablecie? Zawartość strony nie będzie się mieścić na ekranie i pojawi się poziomy pasek przewijania.

Tak jak napisał Michau Xlow, poczytaj o RWD.

odpowiedź 22 października 2016 przez zgrybus Pasjonat (24,860 p.)

Skoro ustawiasz kilka elementów na szerokość 900px to nie dziw się, że jest malutka..

1920px a 900px to jest znaczna różnica

komentarz 22 października 2016 przez webpasion Nowicjusz (230 p.)

ok rozumiem swój błąd, że ustawiłem width: 900px; tylko co zrobić w takim razie żeby strona z zachowaniem marginesów dostosowała się do różnych ekranów o różnej rozdzielczości (żeby width był "płynny")

Z tego co zrozumiałem to RWD ma zastosowanie wtedy kiedy strona nie mieści się na ekranie ( np telefon), bo tam ustawia się min-width i max-width. U mnie strona mieści się na ekranie tylko chce żeby szerokość width i height był płynny, żeby strona mieściła się na ekranie... hmm

Jeżeli wypisuje głupoty to przepraszam :)

komentarz 22 października 2016 przez zgrybus Pasjonat (24,860 p.)

Ustawiasz width za pomocą procentów ;)

np.

@media (min-width: 480px ){
.header{
width: 100%;
}
}

@media (min-width: 1025px) {
.header{
width: 80%;
}
}

Dzięki temu twój "div" będzie się zmieniał w zależności od okna przeglądarki :)

Imo nie ustawiaj szerokości na sztywno, lepiej w procentach :)

komentarz 22 października 2016 przez webpasion Nowicjusz (230 p.)

o to chodziło :) dzięki kolego, masz piwo u mnie

komentarz 22 października 2016 przez zgrybus Pasjonat (24,860 p.)

Jak Ci pomogłem to możesz dać najlepszą :D

komentarz 23 października 2016 przez Pikey Bywalec (2,330 p.)

Pamiętaj o tym, że w "height" nie ustawiamy wartości procentowej. :)

komentarz 23 października 2016 przez Czort Nałogowiec (32,500 p.)

Pamiętaj o tym, że w "height" nie ustawiamy wartości procentowej.

Skąd ta informacja? To jakaś nowość, bo na MDN nadal jest napisane, że można używać procentów? https://developer.mozilla.org/en-US/docs/Web/CSS/height

komentarz 23 października 2016 przez Pikey Bywalec (2,330 p.)

Skąd ta informacja? To jakaś nowość, bo na MDN nadal jest napisane, że można używać procentów? https://developer.mozilla.org/en-US/docs/Web/CSS/height

Według mnie lepiej stosować viewport height, patrząc pod stronę responsywną.