Contao-Camp 2024
Ergebnis 1 bis 8 von 8

Thema: Media Query einbinden

  1. #1
    Contao-Fan
    Registriert seit
    21.07.2009.
    Beiträge
    327

    Standard Media Query einbinden

    Hallo zusammen,
    ich versuche gerade krampfhaft testweise zwei Layouts ein zu binden. Ganz simpel unter 1200 px und über 1200 px.
    EIgenschaften des css gewählt und unter media query verschiedenes probiert:
    @media only screen and (min-width: 1200px)
    min-width: 1200px
    min-width: 1200px;
    (min-width: 1200px)
    Das zweite css halt mit max...
    Nur sobald ich irgendwas in die Media Query Zeile in den css EIgenschaften eingebe, wird das css abgeschaltet.
    Wie binde ich das media Query ein? Google bringt mich nicht weiter und im Quellcode find ich nichts von den Media Querys wieder (Suche nach 1200).

    mfG
    tsunami

  2. #2
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.075
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ist das internes CSS oder sind das eingebundenen CSS-Dateien? Falls Dateien, wie sehen die genau aus?

  3. #3
    Contao-Fan
    Registriert seit
    21.07.2009.
    Beiträge
    327

    Standard mobiles Layout

    Hallo,
    es sind externe css. Habe nun etwas rumprobiert. Sobald ich nun die zweite css einbinde, ist das Layout im EImer. Im neuen Versuch habe ich die Media Query als Format Definition eingebunden.
    Soll ich die ganze css posten? Oder screenshots der Media Query? Wo und wie muss ich die Media Query einbinden?
    mfG
    tsunami

  4. #4
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.075
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Da gibt es mehrere Möglichkeiten, siehe z.B. https://wiki.selfhtml.org/wiki/CSS/M...agen_einbinden

  5. #5
    Contao-Fan
    Registriert seit
    21.07.2009.
    Beiträge
    327

    Standard

    Hi,
    ich habe doch in den css EIgenschaften die Medientypen und darunter die Optionen. Ist das nicht für die verschiedenen Medien-Größen gedacht? Braille, Handheld usw., ja aber ich dachte, da könne man sowas wie max-width eintragen? Habe etliche Formate durch, mit ";" und ohne usw.
    --
    Ich habe nun die css manuell erweitert:
    @media only screen and (max-width: 1199px) and (orientation: portrait) and (orientation: landscape) {
    ...
    }
    und
    @media only screen and (min-width: 1200px) and (orientation: portrait) and (orientation: landscape) {
    ...}
    Leider zerhaut mir das das Layout.

  6. #6
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.075
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Naja, Landscape und Portrait gleichzeitig wird selten vorkommen.

  7. #7
    Contao-Fan
    Registriert seit
    21.07.2009.
    Beiträge
    327

    Standard

    ps Was mich auch irritiert, ist dass im Quellcode nichts mit media query auftaucht.

  8. #8
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.280

    Standard

    Zitat Zitat von tsunami Beitrag anzeigen
    Hi,
    ich habe doch in den css EIgenschaften die Medientypen und darunter die Optionen. Ist das nicht für die verschiedenen Medien-Größen gedacht? Braille, Handheld usw., ja aber ich dachte, da könne man sowas wie max-width eintragen? Habe etliche Formate durch, mit ";" und ohne usw.
    --
    Ich habe nun die css manuell erweitert:
    @media only screen and (max-width: 1199px) and (orientation: portrait) and (orientation: landscape) {
    ...
    }
    und
    @media only screen and (min-width: 1200px) and (orientation: portrait) and (orientation: landscape) {
    ...}
    Leider zerhaut mir das das Layout.
    Nutze doch bitte die Code Buttons..dann kann man es besser lesen.

    Code:
    @media only screen and (max-width: 1199px) and (orientation: portrait) and (orientation: landscape) {
    ...
    }
    Code:
    @media only screen and (min-width: 1200px) and (orientation: portrait) and (orientation: landscape) {
    ...}

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

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