Dlaczego moje zapytania dotyczące mediów CSS3 nie działają na urządzeniach mobilnych?

Nie zapomnij o standardowych deklaracjach css powyżej Zapytanie o media lub 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 only moż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 na stronie prasowej, ale nie działa na IE8, użyłem css3-mediaqueries.JS javascript, ale nadal nie działa. jeśli chcesz, aby Twoje zapytanie o media działało z tym plikiem javascript, dodaj screen do linii zapytań 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>

Linia linku Css tak prosta jak powyższa linia.

Dzisiaj miałem podobną sytuację. Zapytanie o Media nie działa. Po chwili znalazłem tę przestrzeń PO "i" brakowało. Odpowiednie zapytanie o media powinno wyglądać tak:

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

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

Używam kilku metod w zależności. W tym samym arkuszu stylów używam: @ media( max-width: 450px), lub dla oddzielnego upewnij się, że link w nagłówku jest prawidłowy. Spojrzałem na Twój fixmeup i masz mylącą tablicę linków do css. Działa tak jak mówisz również na HTC desire s.

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

Skopiowałem Bootstrap 4 zapytań multimedialnych prosto z ich dokumentów i każde zapytanie jest oznaczone tym samym znacznikiem komentarza w stylu javascript // !

Ponadto, IntelliJ text editor pozwolił mi komentować określone linie css w pliku LESS, ale automatycznie używanym //. To nie jest freeware, więc założyłem, że ma rację. Jest menu preferencji do korygowania tego zachowania.

Sprawdź również swój css za pomocą zaufanego walidatora online. Oto jeden przez W3

Dla mnie wskazałem max-height zamiast max-width.

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