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

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?

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 ...

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;
    }
}

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) { }

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.

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) {}

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;
   }
}

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)

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).

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?

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.

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" />

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){
}

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.

@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;
}

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;
        }
    }

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.