 [inne][CSS]dostosowanie stylu w zależności od rozdzielczości ekranu |
  |
| [inne][CSS]dostosowanie stylu w zależności od rozdzielczości ekranu |
 27.11.2014, 20:19:55
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 48 Pomógł: 0 Dołączył: 25.10.2012 Ostrzeżenie: (0%) 
 |
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. |
 |
 
|
|
27.11.2014, 20:33:10
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 250 Pomógł: 11 Dołączył: 20.01.2014 Ostrzeżenie: (0%)
|
css media query
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp Ten post edytował kamilo818 27.11.2014, 20:33:29 |
|
|
|
|
28.11.2014, 17:20:11
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 48 Pomógł: 0 Dołączył: 25.10.2012 Ostrzeżenie: (0%)
|
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? |
|
|
|
|
28.11.2014, 17:58:44
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 282 Pomógł: 2 Dołączył: 22.03.2007 Ostrzeżenie: (0%)
|
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) { } |
|
|
|
|
28.11.2014, 21:12:18
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 48 Pomógł: 0 Dołączył: 25.10.2012 Ostrzeżenie: (0%)
|
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 ? |
|
|
|
|
28.11.2014, 21:36:19
Post
#6
|
|
 Grupa: Zarejestrowani Postów: 217 Pomógł: 40 Dołączył: 20.08.2008 Ostrzeżenie: (0%)
|
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. |
|
|
|
|
29.11.2014, 18:43:06
Post
#7
|
|
|
Grupa: Zarejestrowani Postów: 48 Pomógł: 0 Dołączył: 25.10.2012 Ostrzeżenie: (0%)
|
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?
|
|
|
|
|
|
Wersja Lo-Fi | Aktualny czas: 25.04.2025 - 05:17 |
