@Media min-width & max-width

224

Ich habe dieses @mediaSetup:

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 dem iPhone, aber nicht im Browser.

Liegt es daran, dass ich bereits devicein der Meta habe und vielleicht max-width:480pxstattdessen?

css mobile media-queries Rallybilen
quelle

1

WAS ist das Problem? Die Standardstile gelten für Bildschirme mit einer Breite von mehr als 769 Pixel.

Gurpreet Singh

Entfernen @media screen and (min-width:769px){Sie einfach die um Ihre normalen Browser-Stile

Zoltan Toth

Was meinst du mit Zoltan? Und ich denke, ich könnte es lösen. Erstens war das Problem, als ich die Größe meines Browsers mit max-device geändert habe - mit dem Telefon, aber nicht im Browser, ohne "Gerät" funktioniert es in beiden.

Rallybilen

Grundsätzlich funktioniert es ohne das "Gerät" sowohl auf dem Handy als auch im Browser, aber wenn ich ein Gerät hinzufüge, kann ich es nicht im Browser sehen. \

Rallybilen

1

Dies sollte 980pxnicht 960daran liegen, dass die Browsergröße bei endet 980px.

338

Ich habe festgestellt, dass die beste Methode darin besteht, Ihr Standard-CSS für ältere Browser zu schreiben, da ältere Browser, z. B. 5.5, 6, 7 und 8. @media nicht lesen können. Wenn ich @media benutze, benutze ich es so:

<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 mit @media machen, was Sie wollen. Dies ist nur ein Beispiel dafür, was ich beim Erstellen von Stilen für alle Browser am besten für mich gefunden habe.

iPad CSS-Spezifikationen.

Ebenfalls! Wenn Sie nach Druckbarkeit suchen, können Sie verwenden@media print{}

bashleigh
quelle

15

Warum haben Sie "Mac" -Bildschirme platziert? Es sind nicht nur "erstaunliche" Macs, die große hochauflösende Bildschirme haben können!

Luke

38

Das zugrunde liegende Problem ist die Verwendung von max-device-widthvs altmax-width .

Die Verwendung des Schlüsselworts "Gerät" zielt auf die physische Dimension des Bildschirms ab, nicht auf die Breite des Browserfensters.

Beispielsweise:

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

Gegen

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

11

Wenn sich eine Website auf kleinen Geräten wie ein Desktop-Bildschirm verhält, müssen Sie dieses Meta-Tag zuvor in die Kopfzeile einfügen

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

Für Medienabfragen können Sie dies als festlegen

Dies deckt alle Ihre Handy- / Handybreiten ab

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

    }

Für iPad und iPad Pro müssen Sie verwenden

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

    }

Wenn Sie CSS für den Querformatmodus hinzufügen möchten, können Sie dies hinzufügen

und (Orientierung: Landschaft)

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

8

Der korrekte Wert für das contentAttribut sollte initial-scalestattdessen Folgendes enthalten :

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

Erweitern Sie das Snippet

Ksenia Titova
quelle

2

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

Michael Benjamin

2

@Michael_B Die Initiale war 'benutzerskalierbar = nein'. Das sagt alles, was ich denke.

Apolo Radomer

0

Für einige iPhone müssen Sie Ihr Ansichtsfenster so platzieren

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

NuggaN85
quelle

@Media min-width & max-width

Antworten: