@Media min-width e max-width

225

Ho questa @mediaconfigurazione:

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 configurazione funziona su iPhone ma non funziona nel browser.

È perché ho già devicenel meta e forse max-width:480pxinvece ho ?

css mobile media-queries

— rallybilen
fonte

1

Qual è il problema - Gli stili predefiniti saranno applicabili a schermi più larghi di 769 px.

— Gurpreet Singh,

è sufficiente rimuovere i @media screen and (min-width:769px){normali stili del browser

— Zoltan Toth,

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

— rallybilen,

Quindi, in pratica, senza il "dispositivo" funziona sia sul dispositivo mobile che sul browser, ma quando aggiungo il dispositivo non riesco a vederlo nel browser \

— rallybilen,

1

Dovrebbe essere 980pxnon 960perché estremità dimensione del browser a 980px.

339

Ho trovato il metodo migliore è scrivere il tuo CSS predefinito per i browser più vecchi, poiché i browser più vecchi, inclusi 5,5, 6, 7 e 8. Non riesco a leggere @media. Quando uso @media lo uso in questo modo:

<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 puoi fare quello che ti piace con il tuo @media, questo è solo un esempio di ciò che ho trovato meglio per me quando ho creato stili per tutti i browser.

Specifiche CSS per iPad.

Anche! Se stai cercando la stampabilità, puoi usarla@media print{}

— bashleigh
fonte

16

Perché hai messo schermi 'mac'? Non sono solo i "fantastici" Mac che possono avere grandi schermi ad alta risoluzione!

— Luca

38

Il problema di fondo sta usando max-device-widthvs semplicemente vecchio max-width.

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

Per esempio:

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

Contro

@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.  */
}

— jpostdesign
fonte

11

Se il sito Web su dispositivi di piccole dimensioni si comporta come lo schermo del desktop, devi prima inserire questo meta tag nell'intestazione

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

Per le query multimediali è possibile impostare come

questo coprirà tutte le larghezze del tuo cellulare / cellulare

    @media only screen and (min-width: 200px) and (max-width: 767px)  {
    //Put your CSS here for 200px to 767px width devices (cover all mobile portrait width //

    }

Per iPad e iPad pro devi usare

    @media only screen and (min-width: 768px) and (max-width: 1024px)  {
    //Put your CSS here for 768px to 1024px width devices(covers all iPad portrait width //

    }

Se si desidera aggiungere CSS per la modalità orizzontale, è possibile aggiungere questo

e (orientamento: paesaggio)

  @media only screen and (min-width: 200px) and (max-width: 767px) and (orientation : landscape) {
        //Put your CSS here for 200px to 767px width devices (cover all mobile landscape width //

        }

— Rohit Kaushik
fonte

8

Il valore corretto per l' contentattributo dovrebbe includere initial-scaleinvece:

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

Espandi frammento

— Ksenia Titova
fonte

2

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

— Michael Benjamin,

2

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

— Apolo Radomer,

0

per alcuni iPhone devi mettere il tuo viewport in questo modo

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0" />

— NuggaN85
fonte