Forum PHP.pl > [CSS]media

Pomoc - Szukaj - Użytkownicy - Kalendarz

eminiasty

24.10.2017, 18:38:39

Chciałbym by strona zmieniała kolor od 480 do 800px

[HTML] pobierz, plaintext 
@media only screen all and (min-width:480px) and (max-width:800px){
		body{
			background:red;
		}
 
 
 
	}
[HTML] pobierz, plaintext

tymczasem kolor zmienia sie od 768 do 800px. Ktoś wie o co chodzi? Stosuje złą konstrukcje css?

Tomplus

24.10.2017, 18:56:44

Myślę że usuniecie ALL, powinno rozwiązać problem.

Kod

@media only screen and (min-width: 480px) and (max-width: 800px) {
    body{
        background:red;
    }
}

Ale dla potwierdzenia uruchom narzędzie deweloperskie przeglądarki i sprawdź czy faktycznie <body> zmniejsza się poniżej 768, bo może po tej wartości zmniejsza się ale poniżej 480px.

eminiasty

24.10.2017, 19:17:41

Korzystam z google developer i cały czas ten sam problem.

http://viamarimar.cba.pl/temp/

Dodatkowo jeszcze jak sa te obrazki, to przy rozdzielczości ponizej 768 przestają działać (nie działa hover), co to może być?

tenloginjestzajety

24.10.2017, 19:27:00

[PHP] pobierz, plaintext 
<style>
@media screen and (min-width: 400px) {
#element{color:red;}
}
@media screen and (min-width: 800px) {
#element{color:black}
}
</style>
[PHP] pobierz, plaintext

eminiasty

24.10.2017, 20:21:43

W ten sposob rowniez od 768 do 800 jest czerwone a od 800 do X jest czarne
od 0 do 768 jest biale

[PHP] pobierz, plaintext 
	@media screen and (min-width: 400px) {
body{
			background:red;
		}
}
@media screen and (min-width: 800px) {
body{
			background:black;
		}
}
[PHP] pobierz, plaintext

o co tu chodzi?

Tomplus

24.10.2017, 20:24:08

Stworzyłem przykład:
https://jsfiddle.net/9pj7vqqz/

Zmieniałem szerokość ramki dla wyniku i wszystko działa zależności jaki mam rozmiar ramki.

Kod

div {
  width:500px;
  height:500px;
  background-color:#eee;
}
@media only screen
and  (min-width: 400px)
and  (max-width: 800px) {
    div{
        background:#ccc;
    }
}
@media only screen
and  (max-width: 400px) {
    div{
        background:#aaa;
    }
}

Ale np.: używając:
max-device-width miałem cały czas domyślny kolor. Chyba że otworzyłem na telefonie, to już CSS zadziałał.

Upewnij się czy jakieś style ci się nie nadpisują.

eminiasty

24.10.2017, 20:30:21

Teoretycznie jest tu kod bootstrapa i ma on swoje rwd ale chce zastosować prostą zmiane koloru, która wgl nie ma się do niczego, więc nie ma się co nadpisywać..
Problematyczne jest to, że nie liczy się od 0 tylko od 768 i nie bardzo wiem jak to możliwe.

Niree

24.10.2017, 21:52:17

Może podaj kod CSS (np. korzystając z wklej.org), może klamry czy coś Ci się mieszają. Chłopaki podali słuszne przykłady.

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.