Perché le mie query multimediali CSS3 non funzionano?

In styles.css, sto usando query multimediali, che usano entrambe una variante di:

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

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

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

I siti si ridimensionano al layout che desidero in un normale browser (Safari, Firefox) quando restringo la finestra, tuttavia, il layout mobile non viene mostrato affatto su un telefono. Invece, vedo solo il CSS predefinito.

Qualcuno può indicarmi la giusta direzione?

Tutti e tre questi erano consigli utili, ma sembra che avessi bisogno di aggiungere un meta tag:

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

Ora sembra funzionare sia su Android (2.2) che su iPhone, va bene ...

Non dimenticare di avere le dichiarazioni CSS standard sopra la media query o la query non funzionerà neanche.

.edcar_letter{
    font-size:180px;
}

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

Ho il sospetto che la parola chiave onlypotrebbe essere il problema qui. Non ho problemi a utilizzare query multimediali come questa:

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

ho usato bootstrap in un sito di stampa ma non ha funzionato su IE8, ho usato javascript css3-mediaqueries.js ma ancora non funzionava. se vuoi che la tua media query funzioni con questo file javascript aggiungi la schermata alla tua media query in css

ecco un esempio:

<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 Link line semplice come sopra.

Oggi ho avuto una situazione simile. La media query non ha funzionato. Dopo un po 'ho scoperto che mancava lo spazio dopo "e". La media query corretta dovrebbe apparire così:

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

Anche l'ordine sequenziale del codice CSS è importante, ad esempio:

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

il codice sopra non funzionerà perché l'ordine eseguito. È necessario scrivere come segue ：

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

Indica sempre la larghezza massima e la larghezza minima in alcune unità come px o rem. Questo ha capito per me. Se lo scrivo senza l'unità e solo il valore numerico, il browser non è in grado di leggere le query multimediali. esempio: questo è lo schermo @media solo sbagliato e (larghezza massima: 950) e questo è lo schermo solo @media corretto e (larghezza massima: 950px)

Lanciare un'altra risposta sul ring. Se stai cercando di utilizzare le variabili CSS, allora fallirà tranquillamente.

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

Le variabili CSS non funzionano nelle query multimediali (in base alla progettazione).

Strana ragione che non ho mai visto prima: se si utilizza un selettore "padre> figlio" al di fuori della media query (in Firefox 69), si potrebbe interrompere la media query. Non sono sicuro del perché questo accada, ma per il mio scenario non ha funzionato ...

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

Ma aggiungendo il genitore per abbinare qualche altro CSS più in alto nella pagina, questo funziona ...

#parent > #child { display: none; }

Sembra che specificare il genitore non dovrebbe importare, dal momento che un ID è molto specifico e non dovrebbe esserci ambiguità. Forse è un bug in Firefox?

Lo snippet di codice dell'OP utilizza chiaramente il markup dei commenti corretto, ma i CSS possono interrompersi in modo progressivo, quindi, se si verifica un errore di sintassi, è probabile che tutto ciò che segue non riesca. Un paio di volte ho fatto affidamento su fonti affidabili che hanno fornito un markup di commenti errato che ha rotto il mio foglio di stile. Poiché l'OP ha fornito solo una piccola parte del loro codice, suggerirei quanto segue:

Assicurati che tutti i tuoi commenti CSS utilizzino questo markup /*... */- che è il markup dei commenti corretto per i CSS secondo MDN

Convalida il tuo CSS con una linter o un validatore online sicuro. Eccone uno di W3

Ulteriori informazioni: sono andato a controllare gli ultimi punti di interruzione consigliati per le query multimediali da bootstrap 4 e ho finito per copiare la piastra della caldaia direttamente dai loro documenti. Quasi ogni blocco di codice è stato etichettato con commenti in stile javascript //, che ha rotto il mio codice - e mi ha dato solo errori di compilazione criptici con cui risolvere i problemi, che all'epoca mi passarono per la testa e mi causarono tristezza.

L'editor di testi IntelliJ mi ha permesso di commentare specifiche righe di CSS in un file MENO usando il tasto ctrl + / hotkey che era eccezionale tranne che si inserisce //di default su tipi di file non riconosciuti . Non è freeware e meno è abbastanza mainstream, quindi mi sono fidato e ci sono andato. Questo ha rotto il mio codice. C'è un menu delle preferenze per insegnargli il markup di commento corretto per ogni tipo di file.

L'inclusione di un meta tag come di seguito può far sì che il browser gestisca lo zoom della finestra in modo diverso.

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

Di recente ho riscontrato anche questo problema e in seguito ho scoperto che non avevo inserito uno spazio tra ande (. Questo è stato l'errore

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

Quindi l'ho cambiato in questo per correggerlo

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

Uso alcuni metodi a seconda. Nello stesso foglio di stile uso: @media (larghezza massima: 450px), o per essere separato assicurati di avere correttamente il link nell'intestazione. Ho dato un'occhiata al tuo fixmeup e hai una serie confusa di collegamenti a CSS. Funziona come dici anche su 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;
}

Per me avevo indicato max-heightinvece di max-width.

Se sei tu, vai a cambiarlo!

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

Può accadere anche se il livello di zoom del browser non è corretto. Lo zoom della finestra del browser dovrebbe essere del 100%. In Chrome utilizzare Ctrl + 0per ripristinare il livello di zoom.