@media min-width & max-width

158

Ich habe diese @media Setup:@media min-width & 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 */ 
}

Mit diesem Setup funktioniert es auf das iPhone funktioniert aber nicht im Browser.

Ist es, weil ich bereits device im Meta habe, und vielleicht max-width:480px stattdessen haben?

Quelle

2012-11-25 rallybilen

Was ist das Problem - Standardstile sind auf Bildschirme anwendbar, die breiter als 769 Pixel sind. –

entfernen Sie einfach die @ @Media-Bildschirm und (min-Breite: 769px) {'um Ihre normalen Browser-Stile –

Was meinst du Zoltan? Und ich denke, ich könnte es lösen. Erstens, das Problem war, als ich meinen Browser mit Max-Gerät-Größe geändert hat - mit es funktionierte am Telefon, aber nicht im Broswer, ohne "Gerät" funktioniert es in beiden. – rallybilen

246

Ich habe die beste Methode gefunden, um Ihre Standard-CSS für die älteren Browser, wie ältere Browser einschließlich d. H. 5.5, 6, 7 und 8 zu schreiben. @media kann nicht gelesen werden. Als ich @media verwende ich es wie folgt verwendet werden:

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

Aber Sie können tun, was Sie mit Ihrem @media mögen, ist dies nur ein Beispiel dafür, was ich am besten für mich gefunden habe, wenn Stile für alle Browser bauen .

iPad CSS specifications.

auch! Wenn Sie nach Bedruckbarkeit suchen, können Sie verwenden @media print{}

Quelle

2012-11-25 11:47:55 sourRaspberri

+10

Warum haben Sie 'Mac' Bildschirme?Es sind nicht nur "erstaunliche" Macs, die große Bildschirme mit hoher Auflösung haben können! – Luke

+11

@ Coulton weil iMacs Regel !! (nur zu sagen: p) – sourRaspberri

Das zugrunde liegende Problem ist die Verwendung max-device-width vs Plain Old max-width.

Mit dem Schlüsselwort "device" wird die physische Dimension des Bildschirms festgelegt, nicht die Breite des Browserfensters.

Zum Beispiel:

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

Quelle

2014-07-08 19:24:23 jpostdesign

danke @jpostdesign für die Klärung meiner Zweifel –

Der korrekte Wert für das Attribut content sollte initial-scale stattdessen umfassen:

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

Quelle

2016-11-11 21:06:43

Wenn Sie erklären könnten, warum und Referenzen hinzufügen, würde diese Antwort nützlicher machen. –

@Michael_B Die Initiale war 'user-scalable = no'. Das sagt alles, denke ich. –

@media min-width & max-width

Antwort

Verwandte Themen