Ergebnis 1 bis 3 von 3

Thema: CSS für mobile Endgeräte (einige Basis-Fragen zu Media-Queries)

  1. #1
    HTML Newbie
    Registriert seit
    20.03.2017
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard CSS für mobile Endgeräte (einige Basis-Fragen zu Media-Queries)

    Moin Allerseits
    ich beschäftige mich gerade mit der Erstellung von CSS-Regeln für mobile Endgeräte und hab da einige Verständnisfragen bez. Mediaqueries.
    Es wäre toll wenn hier mal jemand einem alten Mann über die Strasse helfen könnte

    Vom Ansatz her scheint es ja nicht so wahnsinnig kompliziert zu sein - man schreibt für bestimmte Browserfenstergrößen oder Displaygrößen unterschiedliche Regeln ...
    Aber....

    1: sind folgende Aussagen korrekt?
    a: @media only screen and (width : 320px) greift nur einer Breite von genau 320px?
    b: @media only screen and (min-width : 320px) and (max-width : 480px) greift bei allen Breiten zwischen 320px und 480px

    Und jetzt zu einigen Fragen die ich vielleicht nicht besonders verständlich formulieren kann:
    Wenn ich "min-width" anstatt "min-device-width" nutze dann bezieht sich das ja auf die Browserfenstergröße ("min-width") und nicht auf die Größe des Displays ("min-device-width").
    Wenn ich also mein Handy (320 x 480) von "Portrait" auf "Landscape" kippe - was für eine Breitenangabe muss ich machen wenn ich für "landscape" andere CSS-Regeln will ?
    Die des Gerätes (320) oder die Breite die es jetzt quasi geometrisch einnimmt - also 480?
    Muss ich also zwei Mediaqueries für ein und das selbe Gerät anlegen (Hochformat & Querformat)?

    Frage zwei
    Ich will ein Gerät ansprechen das 320 x 480 hat
    Dann habe ich ein weiteres Exotengerät mit 380 x 460 für das ich andere Regeln brauche
    Wie müssen nun die Queries lauten?
    Was ich bereits herausfinden konnte ist, das das hier nicht geht:
    @media only screen and (min-width : 320px) and (max-width : 480px)
    @media only screen and (min-width : 380px) and (max-width : 460px)

    Die zweite Querie überschreibt nicht die Erste (was ja auch richtig ist) greift aber auch nicht.
    Was auch nicht geht ist das: @media only screen and (width : 380px) denn das würde dazu führen das diese Regeln auch für alle Telefone mit 320 x 480 gilt.
    Und genau das ist mein grösstes Verständnisproblem.
    Wie kann ich etappenweise Media-Queries aufbauen?

    Und dann..... hab ich gelesen das es ja auch noch so was gibt:
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
    Wieso braucht es denn jetzt noch die Angabe zur Lage wenn es doch ohnehin um die durch Drehen nicht veränderbare Breite des Geräts geht??

    Gruß Axel

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    438
    Danke
    0
    Bekam 45 mal "Danke" in 45 Postings

    Standard AW: CSS für mobile Endgeräte (einige Basis-Fragen zu Media-Queries)


  3. #3
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.026
    Danke
    19
    Bekam 108 mal "Danke" in 107 Postings

    Standard AW: CSS für mobile Endgeräte (einige Basis-Fragen zu Media-Queries)

    Danke für die Info
    [MOD: Thread geschlossen, Crosspost]

Ähnliche Themen

  1. Slider wird nur halb angezeigt (Mobile Endgeräte)
    Von AGuevara im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 17.10.2016, 15:41
  2. Probleme mit Media Queries
    Von HamSan im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 14.02.2016, 14:43
  3. Respnsivität für mobile Endgeräte
    Von HanzWurzt im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 19.02.2014, 10:54
  4. Media queries
    Von Ruccola im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 07.01.2013, 15:21
  5. Website auf mobile-Endgeräte umformatieren
    Von DarkEmperor im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 27.07.2011, 21:12

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •