@Media min-width e max-width

158

Ho questa @media impostazione:@Media min-width e max-width

HTML:

<head> 
    <meta name="viewport" content="width=device-width, user-scalable=no" /> 
</head>

CSS:

@media screen and (min-width: 769px) { 
    /* STYLES HERE */ 
} 

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    /* STYLES HERE */ 
} 

@media only screen and (max-device-width: 480px) { 
    /* STYLES HERE */ 
}

Con questa impostazione funziona su l'iPhone ma non funziona nel browser.

È perché ho già device nella meta e forse ho max-width:480px invece?

fonte

2012-11-25 rallybilen

Qual è il problema: gli stili predefiniti saranno applicabili a schermi più larghi di 769 px. –

rimuovi lo schermo '@media e (min-width: 769px) {' attorno ai tuoi normali stili di browser –

Cosa intendi con Zoltan? E penso che potrei risolverlo. Innanzitutto, il problema è stato quando ho ridimensionato il mio browser con max-device: con esso funzionava sul telefono ma non nel broswer, senza "dispositivo" funziona in entrambi. – rallybilen

246

Ho trovato il metodo migliore è quello di scrivere il CSS predefinito per i browser più vecchi, come i browser più vecchi tra cui i 5.5, 6, 7 e 8. Impossibile leggere @media. Quando uso @media Io lo uso come questo:

<style type="text/css"> 
    /* default styles here for older browsers. 
     I tend to go for a 600px - 960px width max but using percentages 
    */ 
    @media only screen and (min-width:960px){ 
     /* styles for browsers larger than 960px; */ 
    } 
    @media only screen and (min-width:1440px){ 
     /* styles for browsers larger than 1440px; */ 
    } 
    @media only screen and (min-width:2000px){ 
     /* for sumo sized (mac) screens */ 
    } 
    @media only screen and (max-device-width:480px){ 
     /* styles for mobile browsers smaller than 480px; (iPhone) */ 
    } 
    @media only screen and (device-width:768px){ 
     /* default iPad screens */ 
    } 
    /* different techniques for iPad screening */ 
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { 
     /* For portrait layouts only */ 
    } 

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { 
     /* For landscape layouts only */ 
    } 
</style>

Ma si può fare quello che ti piace con il vostro @media, questo è solo un esempio di quello che ho trovato meglio per me quando si costruisce stili per tutti i browser .

iPad CSS specifications.

anche! Se stai cercando la stampabilità puoi usare @media print{}

fonte

2012-11-25 11:47:55 sourRaspberri

+10

Perché hai messo schermi 'mac'?Non sono solo i Mac "sorprendenti" che possono avere schermi ad alta risoluzione di grandi dimensioni! – Luke

+11

@Coulton perché regola iMac !! (solo dicendo: p) – sourRaspberri

Il problema di fondo sta usando max-device-width rispetto al semplice vecchio max-width.

L'utilizzo della parola chiave "dispositivo" ha come obiettivo la dimensione fisica dello schermo, non la larghezza della finestra del browser.

Ad esempio:

@media only screen and (max-device-width: 480px) { 
    /* STYLES HERE for DEVICES with physical max-screen width of 480px */ 
}

Versus

@media only screen and (max-width: 480px) { 
    /* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. 
     This will work on desktops when the window is narrowed. */ 
}

fonte

2014-07-08 19:24:23 jpostdesign

grazie @jpostdesign per chiarire il mio dubbio –

Il valore corretto per l'attributo content dovrebbe comprendere initial-scale invece:

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

fonte

2016-11-11 21:06:43

Se potessi spiegare perché e aggiungere riferimenti, ciò renderebbe questa risposta più utile. –

@Michael_B L'iniziale era 'user-scalable = no'. Questo dice tutto ciò che penso. –

@Media min-width e max-width

risposta

Problemi correlati