Witam mam kod

[PHP] pobierz, plaintext 
 
// tutaj kod dla normalnej strony
 
@media only screen and (max-width: 768px) { ... }
 
[PHP] pobierz, plaintext 

Chodzi o to że gdy otwiram w przegladarce dla rozdzielczości poniżej 768px owszem widzę że @media się pojawia w narzędziach dewelopera w przeglądarce ale wartości , które wewnątrz występują są przekreślone... nie wiem dlaczego... mam dodane meta viewport

Bo nadpisujesz sobie regułami dla wszystkich rozdzielczości lub silniejszymi?

Czyli każdy rozmiar musi być zamknięty w @media a powyżej tylko dane dostępne dla wszystkich?

@media(max-width:1200px) mowi co ma sie stac z danym elementem ponizej tej szerokosci ekranu. wiec

[HTML] pobierz, plaintext 
h1{
   font-size:48px;
}
@media(max-width:1200px){
   h1{
      font-size:36px;
   }
}
[HTML] pobierz, plaintext 

nadpisze to co jest wyzej.

@media sprawia jedynie, że pewne reguły są w ogóle "dostępne" w danych warunkach - nie ma jednak żadnego wpływu na ich moc. Poczytaj o mocy/priorytecie selektorów w CSS-ie.