Forum PHP.pl > [PHP] Czy mozna zrobić stronę dla dwóch róznych rozdzielczosci?

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [PHP] Czy mozna zrobić stronę dla dwóch róznych rozdzielczosci?

LubieWino

28.04.2012, 02:33:32

Takie pytanie: czy można zrobić layout strony delikatnie inny dla rozdzielczosci 1024 (w szerokosci) niż dla szerokosci większych? Ale nie chodzi mi o skalowanie.
Z pewnych względów strona dobrze wygląda w szerokosci 1280 (i wiekszych) ale źle przy 1024 (cięzko to dobrze skalować), i myslalem, czy dałoby radę, aby przeglądarka wykrywała okno mniejsze niż 1024 i wczytywała wtedy np. mniejsze grafiki przycisków lub innych ?
Czy jednak nie da rady i trzeba zrobić od początku stronę skalowalną dynamicznie na wszystkie rozdziałki?

bpskiba

28.04.2012, 05:34:58

Cytat(LubieWino @ 28.04.2012, 03:33:32 )

Można.
Należy do tego wykorzystać javascript

[HTML] pobierz, plaintext 
document.write("screen.width+"x"+screen.height);
[HTML] pobierz, plaintext

lobopol

28.04.2012, 08:58:46

Można to zrobić na kilka sposobów:
-używając media query do dołączania odpowiednich stylów -bez js działa w IE 9+, Firefox 3.6+, Safari 3+, Chrome, Opera 10+

[HTML] pobierz, plaintext 
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/min.css' />
[HTML] pobierz, plaintext

-stosując media query w samym css (działa jak w wyższym)

[CSS] pobierz, plaintext 
@media screen and (min-width: 480px){
      div {
           color: #000;
      }
}
[CSS] pobierz, plaintext

aby to działało w i8- https://github.com/scottjehl/Respond
-bez media query z użyciem js tworzysz sobie styl css z cyklu:

[CSS] pobierz, plaintext 
#big div {
  color: #fff;
 
}
#small div {
 color: #000;
}
[CSS] pobierz, plaintext

i html w stylu :

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<link href="test.css" rel="stylesheet"/>
</head> 
<body id="big">
<div>aaaa</div>
 
</body>
</html>
[HTML] pobierz, plaintext

i js (napiszę z jquery bo mi się nie chcę pisać pełnych funkcji)

[JAVASCRIPT] pobierz, plaintext 
function size(width) {
    width = parseInt(width);
    if (width <= 1024) {
        $("body").attr("id", "small");
    }  else {
       $("body").attr("id", "big");
    }
}
 
$(function() {
    size($(this).width());
    $(window).resize(function() {
        size($(this).width());
    });
});
[JAVASCRIPT] pobierz, plaintext

lub zamiast podmieniania id w body możesz podmieniać sobie link do css tą funkcją.

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.