[inne][CSS]dostosowanie stylu w zależności od rozdzielczości ekranu Opcje

[interu58]

Szukam podpowiedzi - w jaki sposób można najlepiej dostosować wielkość strony w zależności od rozdzielczości ekranu?
W googlach znalazłem jakiś skrypty do tego, ale za mało znam js. Wolałbym użyć czegoś prostszego.

[kamilo818]

css media query
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Ten post edytował kamilo818 27.11.2014, 20:33:29

[interu58]

to max, min, 100% width stosowałem i wygląda to strasznie przynajmniej w przypadku mojej strony, ale może to własnie kwestia sposobu w jaki ją wykonałem. divy z zawartością mają stała szerokość 1260px. jak zrobię 100% w szerokości to wszystko się rozjeżdża i mowa tu o szerokości tła diva np. oczywiście, żeby ta szerokość tła zadziałał, trzeba samego diva pozbawić wartości width. wygląda to co najmniej średnio, żeby nie powiedzieć beznadziejnie (przy mniejszej rozdzielczości wygląda jeszcze gorzej, bo wszystko zaczyna na siebie nachodzić.
dlatego pomyślałem o dwóch arkuszach stylów - jednym pasującym do mniejszych rozdzielczości i drugim, który będzie pasował do rozdzielczości większych - tak żeby i obrazki i czcionki i tło było mniej więcej dopasowane. i generalnie chodzi mi oto w jaki sposób można załadować te arkusze tak żeby ten zapis odczytywał rozdzielczość komputera i wybierał odpowiedni arkusz stylu?

[Sebastian003]

np.

Kod

@media only screen
and (max-width: 980px) {

}

@media only screen
and (max-width: 750px) {

}

@media only screen
and (max-width: 540px) {

}

@media only screen
and (max-width: 320px) {

}

[interu58]

hmmm...nie za bardzo rozumiem jak ten zapis działa.
w sensie to jest tak, że np. przy rozmiarze ekranu 980px stosuje wartości umieszczone w { } ?
i rozumie, ze to się umieszcza w głównym arkuszy stylu ?

[ikssde]

Dokładnie tak, definiując blok @media only screen and (max-width: 320px) parametr max-width określa przy jakich rozmiarach ekranu style, które masz pomiędzy klamerkami będą zastosowane.
Możesz też zastosować konstrukcję odwrotną, czyli @media only screen and (min-width: 320px), wtedy style będą obowiązywały dla każdego ekranu powyżej 320px.
Możesz też zastosować obie konstrukcje i tak na przykład będziesz miał @media only screen and (min-width: 320px) and (max-width: 640px), czyli style obowiązują dla ekranów od 320px do 640px.

Polecam zapoznanie się z jakimś gridem, np. gs960. Taki system pomoże wszystko uporządkować i może media queries okażą się być zbędne.
Prezentacja tego systemu tutaj.

[interu58]

dzięki. zajrzałem do tego i faktycznie działa, ale nie we wszystkich przeglądarkach. chrome i ie tak, opera i mozilla nie. wie ktoś moze dlaczego tak się dzieje?