Dlaczego moje zapytania o media CSS3 nie działają?


182

W style.css używam zapytań o media, które wykorzystują różne odmiany:

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

Po zmniejszeniu okna strony zmieniają rozmiar na pożądany przeze mnie w zwykłej przeglądarce (Safari, Firefox), jednak układ mobilny wcale nie jest wyświetlany na telefonie. Zamiast tego widzę tylko domyślny CSS.

Czy ktoś może skierować mnie we właściwym kierunku?


3
Co to za telefon komórkowy? Zapytania o media to nowa funkcja w CSS, nie wszystkie przeglądarki telefonów komórkowych ją obsługują ...
Sparky

1
iPhone 4 i testuję również na telefonie z Androidem (2.2 Froyo) o rozdzielczości 320 x 480.
redconservatory

Właściwie przełączyłem się na następujące zapytanie dotyczące multimediów na iPhonie 4 i działa (ale muszę zmienić mój CSS, aby dostosować się do wyższej rozdzielczości) @media tylko ekran i (-webkit-min-device-pixel-ratio: 2) {}
redconservatory

I w końcu zrozumiał, że brakowało pxw @media (max-width: 320px).
Ryan

w moim przypadku było to spowodowane tym, że chromowana konsola programisty była otwarta, stąd wysokość nie była
taka, jak

Odpowiedzi:


475

Wszystkie trzy były pomocne, ale wygląda na to, że musiałem dodać metatag:

<meta content="width=device-width, initial-scale=1" name="viewport" />

Teraz wydaje się, że działa zarówno na Androidzie (2.2), jak i na iPhonie ...


59
Właściwie <meta name = "viewport" content = "width = device-width, initial-scale = 1">
Lukas Lukac

4
8 lat później i nadal jest to przydatne. Pominąłem też metatag i nie mogłem uzyskać zapytań o media do pracy w projekcie. Tag i wham okienka, to działa
SoWhat,

1
9 lat później, nadal bardzo przydatne. Nie mogę uwierzyć, że o tym zapomniałem
Breno Baiardi

@LukasLukac dlaczego to jest?
Jonesopolis

68

Nie zapomnij mieć standardowych deklaracji css powyżej zapytania o media, w przeciwnym razie zapytanie również nie będzie działać.

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

5
W rzeczywistości, układaj style CSS w kolejności malejącej od standardowego do najmniejszego rozmiaru. Reguły nadal obowiązują, jeśli wszystkie zapytania o media znajdują się w tym samym pliku.
Phil Andrews,

1
Działa dla mnie, nawet jeśli nie mam standardowej deklaracji css dla tej klasy.
Mason,

To rozwiązało mój problem. Dziękuję bardzo ... Przeoczyłem możliwość nadpisania mojego CSS.
pmcg521,

20

Podejrzewam, że słowo kluczowe onlymoże być tutaj problemem. Nie mam problemów z używaniem takich zapytań o media:

@media screen and (max-width: 480px) { }


20

użyłem bootstrap w witrynie prasowej, ale nie działa na IE8, użyłem javascript css3-mediaqueries.js, ale nadal nie działa. jeśli chcesz, aby zapytanie o media działało z tym plikiem javascript, dodaj ekran do wiersza zapytania o media w css

Oto przykład :

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

css Linia łącza tak prosta jak powyżej linii.


12

Dzisiaj miałem podobną sytuację. Zapytanie o media nie działało. Po chwili zauważyłem, że brakuje miejsca po „i”. Prawidłowe zapytanie o media powinno wyglądać następująco:

@media screen and (max-width: 1024px) {}

1
Dlatego mamy weryfikatory CSS. Nie ma to związku z tym konkretnym problemem, ponieważ PO wskazuje już, że zapytania o media faktycznie działają w przeglądarkach innych niż mobilne.
cimmanon

4
Nadal uważam to za pomocne, ponieważ był to problem w moim przypadku
Loren Shqipognja

4

Ważna jest również sekwencyjna kolejność kodu css, na przykład:

@media(max-width:600px){
  .example-text{
     color:red;
   }
}
.example-text{
   color:blue;
}

powyższy kod nie będzie działał, ponieważ wykonane zamówienie. Musisz napisać w następujący sposób :

.example-text{
   color:blue;
}
@media(max-width:600px){
  .example-text{
     color:red;
   }
}

To jest błąd, który popełniłem. Dziękuję Ci.
VorganHaze

4

Zawsze wymieniaj maksymalną i minimalną szerokość w niektórych jednostkach, takich jak px lub rem. To mnie wymyśliło. Jeśli napiszę to bez jednostki i tylko wartości liczbowej, przeglądarka nie będzie mogła odczytać zapytań o media. przykład: to źle @ ekran tylko dla mediów i (maks. szerokość: 950) i to jest ekran @ tylko dla mediów i (maks. szerokość: 950 pikseli)


Dziękuję Ci! Chociaż patrzyłem na wszystkie przykłady, nigdy nie zauważyłem, że zapomniałem px!
markand

2

Rzucanie kolejnej odpowiedzi na pierścień. Jeśli próbujesz użyć zmiennych CSS, to po cichu zawiedzie.

@media screen and (max-device-width: var(--breakpoint-small)) {}

Zmienne CSS nie działają w zapytaniach o media (według projektu).


2

Dziwny powód, którego nigdy wcześniej nie widziałem: jeśli używasz selektora „rodzic> dziecko” poza zapytaniem o media (w Firefoksie 69), może to przerwać zapytanie o media. Nie jestem pewien, dlaczego tak się dzieje, ale w moim przypadku nie zadziałało ...

@media whatever {
    #child { display: none; }
}

Ale dodanie elementu nadrzędnego w celu dopasowania do innego CSS w dalszej części strony, to działa ...

#parent > #child { display: none; }

Wydaje się, że określenie rodzica nie powinno mieć znaczenia, ponieważ identyfikator jest bardzo konkretny i nie powinno być dwuznaczności. Może to błąd w Firefoksie?


2

Fragment kodu OP wyraźnie używa poprawnego znacznika komentarza, ale CSS może pękać w sposób progresywny - więc jeśli wystąpi błąd składniowy, wszystko po tym prawdopodobnie zawiedzie. Kilka razy korzystałem z wiarygodnych źródeł, które podały niepoprawne znaczniki komentarzy, które złamały mój arkusz stylów. Ponieważ OP dostarczył tylko niewielką część swojego kodu, proponuję następujące:

Upewnij się, że wszystkie komentarze CSS używają tego znacznika /*... */- który jest poprawnym znacznikiem komentarza dla css według MDN

Sprawdź poprawność swojego css za pomocą lintera lub bezpiecznego walidatora online. Oto jeden z W3

Więcej informacji: poszedłem sprawdzić najnowsze zalecane punkty przerwania dla zapytań o media z bootstrap 4 i skończyłem kopiowanie płyty kotła bezpośrednio z ich dokumentów. Prawie każdy blok kodu był opatrzony komentarzami w stylu javascript //, które złamały mój kod - i dały mi tylko tajemnicze błędy kompilacji, z którymi mogłem rozwiązywać problemy, które w tym czasie przeszły mi przez głowę i spowodowały smutek.

Edytor tekstu IntelliJ pozwolił mi skomentować określone wiersze css w pliku LESS za pomocą skrótu ctrl + /, co było świetne, z tym że //domyślnie wstawia nierozpoznane typy plików . To nie jest darmowy i mniej jest raczej głównym nurtem, więc zaufałem temu i poszedłem z tym. To złamało mój kod. Istnieje menu preferencji umożliwiające nauczenie poprawnego oznaczania komentarzy dla każdego rodzaju pliku.


1
OP używa już odpowiedniego znacznika komentarza, jak pokazano w poście .
TylerH

W rzeczywistości po najechaniu myszką na przycisk downvote zobaczysz dokładnie, do czego służą . Poza tym, downvotes są 1) anonimowe i 2) nie trollują. Co więcej, podpalenie kogoś nie jest sposobem na to, by zmienił coś, co według ciebie zrobili.
TylerH

O mój! Uratowałeś mi dzień.
limfinity

2

Dołączenie metatagu, takiego jak poniżej, może spowodować, że przeglądarka będzie inaczej obsługiwać powiększanie widoku.

<meta content="width=device-width, initial-scale=1" name="viewport" />


1

Ostatnio spotkałem się z tym problemem, a później dowiedziałem się, że to dlatego, że nie umieściłem spacji między anda (. To był błąd

@media screen and(max-width:768px){
}

Potem zmieniłem to na to, żeby to poprawić

@media screen and (max-width:768px){
}

0

W zależności od tego używam kilku metod. W tym samym arkuszu stylów, którego używam: @media (max-width: 450px), lub osobno upewnij się, że link ma prawidłowy nagłówek. Spojrzałem na twój fixmeup i masz mylącą tablicę linków do css. Działa tak, jak mówisz, również w HTC Desire S.


Jeszcze raz spojrzę na CSS, dzięki ... dobrze wiedzieć, że coś działa.
redconservatory

0
@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}

7
proszę dodaj wyjaśnienie do swojego kodu, pokazując, jak to rozwiązuje problem - pomoże to innym w przyszłości, a twoja odpowiedź będzie bardziej pozytywnie oceniana
Nasz człowiek w Bananas

2
Ten fragment kodu może rozwiązać pytanie, ale wyjaśnienie naprawdę pomaga poprawić jakość posta. Pamiętaj, że w przyszłości odpowiadasz na pytanie czytelników, a ci ludzie mogą nie znać przyczyn Twojej sugestii kodu.
Ferrybig,

0

Dla mnie wskazałem max-heightzamiast max-width.

Jeśli to ty, zmień to!

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

0

Może się to również zdarzyć, jeśli poziom powiększenia przeglądarki jest nieprawidłowy. Powiększenie okna przeglądarki powinno wynosić 100%. W Chrome użyj, Ctrl + 0aby zresetować poziom powiększenia.


1
To nie powinno było zostać odrzucone. To była odpowiedź na mój frustrujący problem!
Amir Almusawi
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.