Perché le mie query multimediali CSS3 non funzionano?


183

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?


3
Che telefono cellulare è? Media Queries è una nuova funzionalità dei CSS, non tutti i browser per telefoni cellulari lo supportano ...
Sparky,

1
iPhone 4 e anche io sto testando su un telefono Android (2.2 Froyo) con una risoluzione di 320 x 480.
redconservatory il

In realtà sono passato alla seguente media query su iPhone 4 e funziona (ma devo cambiare il mio CSS per adattarmi alla risoluzione più alta) schermo @media only e (-webkit-min-device-pixel-ratio: 2) {}
redconservatory il

Ho finalmente capito che mi mancava pxin @media (max-width: 320px).
Ryan,

nel mio caso, era a causa della console di sviluppo di Chrome aperta, quindi l'altezza non era quello che stavo pensando
Rabolf

Risposte:


476

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


59
In realtà <meta name = "viewport" content = "larghezza = larghezza dispositivo, scala iniziale = 1">
Lukas Lukac

4
8 anni dopo e questo è ancora utile. Ho saltato anche il metatag e non sono riuscito a far funzionare le query multimediali in un progetto. Viewport tag e wham, funziona
SoWhat

1
9 anni dopo, ancora così utile. Non posso credere che lo stavo dimenticando
Breno Baiardi il

@LukasLukac perché?
Jonesopolis

68

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

5
In effetti, fai in modo che i tuoi stili CSS siano impilati in ordine decrescente dalla dimensione standard alla dimensione più piccola. Le regole si applicano ancora Se le query multimediali sono tutte nello stesso file.
Phil Andrews,

1
Funziona per me anche se non ho una dichiarazione CSS standard per detta classe.
Mason,

Questo ha risolto il mio problema. Grazie mille ... Ho trascurato la possibilità che il mio CSS fosse sovrascritto.
pmcg521,

20

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


20

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.


12

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

1
Ecco perché abbiamo validatori CSS. Ciò non è rilevante per questo particolare problema poiché l'OP sottolinea già che le query multimediali funzionano effettivamente nei browser non mobili.
cimmanon,

4
Ho ancora trovato utile questo dato che era il problema nel mio caso
Loren Shqipognja,

4

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

Questo è l'errore che stavo facendo. Grazie.
VorganHaze,

4

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)


Grazie! Anche se stavo guardando tutti gli esempi, non ho mai notato che avevo dimenticato il px!
markand

2

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


2

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?


2

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.


1
OP sta già utilizzando il markup di commento corretto, come dimostrato nel post .
TylerH,

In realtà se passi il mouse sul pulsante downvote vedrai esattamente a cosa servono . A parte questo, i downgrade sono 1) anonimi e 2) non trolling. Inoltre, fiammeggiare qualcuno non è il modo per convincerlo a cambiare qualcosa che pensi abbia fatto.
TylerH,

Oh mio! Mi hai salvato la giornata.
limfinity

2

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


1

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

0

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.


Daremo di nuovo un'occhiata al CSS, grazie ... buono a sapersi che funziona su qualcosa.
redconservatory il

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
per favore aggiungi qualche spiegazione al tuo codice, mostrando come risolve il problema - questo aiuterà gli altri in futuro, e la tua risposta è più probabile che venga votata
nostro uomo in banane

2
Mentre questo frammento di codice può risolvere la domanda, inclusa una spiegazione aiuta davvero a migliorare la qualità del tuo post. Ricorda che stai rispondendo alla domanda per i lettori in futuro e che queste persone potrebbero non conoscere i motivi del tuo suggerimento sul codice.
Ferrybig,

0

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

0

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.


1
Questo non avrebbe dovuto essere votato in negativo. Questa è stata la risposta al mio problema frustrante!
Amir Almusawi,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.