Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [inne][CSS]dostosowanie stylu w zależności od rozdzielczości ekranu
Forum PHP.pl > Forum > Przedszkole
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
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?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.