Witam,

Mam przygotowane trzy CSSy do 3 różnych rozdzielczości ekranu. Chcę pobrać od użytkownika informację o tym jakiej używa obecnie rozdzielczości i na tej podstawie użyć odpowiedni css do strony. W jaki sposób to zrobić? NIE CHCE PRZEKIEROWANIA DO OSOBNYCH PLIKÓW HTML. Wszystko musi znajdować się w JEDNYM pliku 'index.html'.

Z góry dziękuję za pomoc

a nie możesz zrobic jeden css który będzie automatycznie zmieniał wielkośc strony

Uważam, że lepiej będzie zrobić jednego porządnego CSS'a, który będzie pasował pod każdą rozdzielczość.

czytaj uważnie Dominator wyżej już to napisałem

Otóż nie. Mam wyraźne polecenie, że mają być 3 SZABLONY. Pytam zatem raz jeszcze - czy ktoś wie jak to zrobić?

Czytałem o skrypcie w JS, który przy załadowaniu strony sprawdza rozdzielczość i wybiera odpowiedniego cssa. O to dokładnie mi chodzi.

Użyj media query i będziesz miał jednego css: http://webdesignerwall.com/tutorials/respo...sign-in-3-steps Jak koniecznie chcesz mieć różne arkusze: http://css-tricks.com/resolution-specific-stylesheets/

O ! Właśnie o to mi chodziło Wielkie dzięki, naprawdę - nie wiedziałem, że to takie proste. Wystarczyły trzy linijki:

<link rel="stylesheet" media="screen and (min-device-width: 1024px)" href="screen_1024.css" >
<link rel="stylesheet" media="screen and (min-device-width: 1600px)" href="screen_1600.css" >
<link rel="stylesheet" media="screen and (min-device-width: 1920px)" href="screen_1920.css" >

Jeszcze tylko jedno pytanko - który arkusz zostanie wybrany jeśli użytkownik ustawi inną niż te trzy zdefiniowane przeze mnie rozdzielczości? Można ustawić jakiś 'domyślny'?

Eh...właśnie zobaczyłem, że nie działa ten sposób w IE.. a to właśnie na tej przeglądarce mi zależy.

<link rel="stylesheet" media="screen and (max-device-width: 1023px)" href="screen_small.css" >

Dla tych co są mniejsze niż 1024 px

Dla ie trzeba się bawić z js, masz tam przykład, ale znacznie lepiej użyć przykładu z pierwszego linku

Kurczę, nie bardzo mi chce działać to z JS... coś chyba źle robię...


<link rel="stylesheet" type="text/css" href="main.css" >
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" >

<script type="text/javascript">

function adjustStyle(width) {
width = parseInt(width);
if (width = 1920) {
$("#size-stylesheet").attr("href", "screen_1920.css");
} else if ((width >= 701) && (width < 900)) {
$("#size-stylesheet").attr("href", "css/medium.css");
} else {
$("#size-stylesheet").attr("href", "css/wide.css");
}
}

$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});

</script>

TO wszystko oczywiście w headzie.

A jquery dodałeś?

<link rel="stylesheet" type="text/css" href="screen_1024.css" >
<link id="size-stylesheet1024" rel="stylesheet" type="text/css" href="screen_1024.css" >
<link id="size-stylesheet1600" rel="stylesheet" type="text/css" href="screen_1600.css" >
<link id="size-stylesheet1920" rel="stylesheet" type="text/css" href="screen_1920.css" >

<script type="text/javascript">

function adjustStyle(width) {
width = parseInt(width);
if (width = 1024) {
$("#size-stylesheet1024").attr("href", "screen_1024.css");
} else if (width = 1600) {
$("#size-stylesheet1600").attr("href", "screen_1600.css");
} else if (width = 1920) {
$("#size-stylesheet1920").attr("href", "screen_1920.css");
} else {
$("#size-stylesheet1024").attr("href", "screen_1024.css"); }

}

$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});

</script>

Teraz jest chyba dobrze?

Wybacz, ale w przykładzie masz pełen kod. Naprawdę tak ciężko go skopiować?

Nie, nie jest ciężko go skopiować - zrobiłem to, zmodyfikowałem pod swoje potrzeby i niestety nie działa i nie wiem gdzie zrobiłem błąd.

jak dla mnie to powinieneś mieć tylko jeden <link rel> i to jemu zmieniać url stylów, bo inaczej wczytujesz wszystkie naraz...
poza tym masz w "if"ach tylko jeden znak =. Powinny być przynajmniej dwa, a najlepiej coś w stylu if (width>=1024&&width<1280)

Dokładnie - coś jest z tym nie tak, bo zawsze wczytuje się ten ostatni <link rel>... ale nie mam pojęcia jak to zrobić w jednym - każdy z nich musi mieć przecież ID i odnośnik do konkretnego szablonu...

Nie znam się na JS, więc nie jest to dla mnie takie proste...nawet nie wiem czy w dobrym miejscu tą funkcję umieściłem...