liebewinter: Wie kann Media Query überschreibung

Hallo , ich versuche seit eine Woche ein Media Query zu bauen... , ich versuche mit den Emulatoren die auf dieser Seite gibt es ...

ich habe alle 6 Media Querys schrieben als Samsung Galaxy der ich Später möchte machen... alle Parameter funzioniert gute als Nokia Lumia 920 der überschreibt mein (orientation : portrait) vom Apple iPad Mini …

das probleme macht der Media Query (orientation : portrait) von Nokia , ich habe diese Media in andere positionen gelegt (Oben vom Media Apple iPad Mini) , aber dem Problem bleibt...

Das probleme in konkret habe auf Hover von Media Apple iPad Mini der wird von Haver vom Nokia ...

Der Code von Nokia (orientation : portrait)

@media only screen and (max-width : 768px) and (orientation : portrait) { body { display: -ms-grid; display: grid; grid-row-gap: 5px; background-color: #ebf5d7; grid-template-columns: 20% 70% 10%; grid-template-areas: "header header header" "nav nav nav" "linkBox main main" "footer footer footer"; -ms-grid-columns: 9% 75% 16%; -ms-grid-row: 120px 80px 103px 200px 110px 90px; -ms-grid-gap: 5px; } body > header { background-image: url("Bilder/view.png"); background-repeat: no-repeat; padding: 55px; margin-bottom: 1px; } #navs a{font-size: 11px; padding: 0px 6px;} #externalLinks ul { margin-left: -12px; } #externalLinks a { font-size: 10px; } #name {font-size: 0.55em;} #email {font-size: 0.55em;} #text {font-size: 0.3em;} /* HOVER */ .dropdown:hover .dropdown-content { left: 42px; top: 170px; } }

Das Probleme bekomme wenn schreibt display: -ms-grid; , aber das soll machen weil Nokia mit Windows als Betriebe systen läuft...

Der(orientation : portrait) vom Apple iPad Mini Code;

@media only screen and (max-width: 64em) and (orientation: portrait) { body { display: grid; background-color: #ebf5d7; grid-template-columns: 11% 76% 13%; grid-template-rows: auto auto 70vh auto; grid-row-gap: 5px; grid-template-areas: "header header header" "nav nav nav" "linkBox main infoBox" "footer footer footer"; } body > main { height: 70vh; } #name {font-size: 0.55em;} #email {font-size: 0.55em;} #text {font-size: 0.8em;} #comment {font-size: 0.5em;} #externalLinks a{text-align: left;} #externalLinks ul {margin: 2px;} #navs a{ font-size: 15px; } #externalLinks ul { margin-left: -10px; } #externalLinks a { font-size: 13px; } .dropdown:hover .dropdown-content { left: 82px; top: 205px; } }

Kann Bitte jemand hilfe mir um diesen Problem zu lösen , Danke !

  1. ich habe noch etwas vergese zu sagen… Auf meine Media Query habe auch -ms-grid for Desktop windows gebaut... , der Code..

    @media only screen and (min-width: 64em) and (max-width: 80em) { body { display: grid; display: -ms-grid; background-color: #ebf5d7; grid-row-gap: 5px; grid-template-columns: 8% 74% 18%; grid-template-areas: "header header header" "nav nav nav" "linkBox main infoBox" "footer footer footer"; -ms-grid-columns: 8% 74% 18%; -ms-grid-row: 120px 80px 103px 200px 110px 90px; -ms-grid-gap: 5px; } } body > header { grid-area: header; -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; -ms-grid-row-span: 1; background-image: url("Bilder/view.png"); background-repeat: no-repeat; padding: 60px; } body > nav { grid-area: nav; -ms-grid-column: 1/3; -ms-grid-column-span: 3; -ms-grid-row: 2; background-color: #d2f5c4; margin: 1px; } body > #externalLinks { grid-area: linkBox; -ms-grid-column: 1; -ms-grid-row: 3; -ms-grid-row-span: 5; grid-template-columns: 1; grid-template-rows: 3/4; margin: 1px; background-color: #d2f3c6; } body > main { grid-area: main; display: block; -ms-grid-column: 2; -ms-grid-row: 3; -ms-grid-row-span: 3; margin: 1px; background-color: #eaf6e5; } body > #furtherInformation { grid-area: infoBox; -ms-grid-column: 3; -ms-grid-column-span: 3; -ms-grid-row: 3; -ms-grid-row-span: 3; margin: 1px; background-color: #d2f3c6; } body > footer { grid-area: footer; -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 6; -ms-grid-row-span: 6; background-color: #99ee7a; }
    1. Hallo liebewinter,

      -ms-grid-row: 120px 80px 103px 200px 110px 90px;

      https://wiki.selfhtml.org/wiki/Referenz:CSS/Eigenschaften/grid-row

      Bis demnächst
      Matthias

      -- Pantoffeltierchen haben keine Hobbys.
      1. Danke für deinen Antwort !

        Auf meine Probleme have eine lösung gefunde ☺️

        ich habe neue meine Media Query gebaut.. , hier hat das Weg gezeigt....auch wenn nicht alle Media passen (ich soll selbst für einieger Media individuel schreiben..), ist das beste lösung , ich bin seit eine Woche der kampf um eine lösung zu finden...

        1. @@ liebewinter

          hier hat das Weg gezeigt....

          Den Holzweg, wie wir im Deutschen sagen. Den Irrweg, den falschen Weg.

          „CSS Media Queries for Desktop, Tablet, Mobile.“ 😱🤬🤮

          Breakpoints sollten sich nach den Inhalten richten; nicht nach gegenwärtig gerade hippen Geräten. ☞ Brad Frost: 7 Habits of Highly Effective Media Queries. “Every time you see 320px, 480px, 768px, 1024px used as breakpoint values, a kitten gets its head bitten off by an angel…or something like that.”

          Und Brekpoints sollten in em angegeben werden, nicht in px. ☞ Zell Liew: PX, EM or REM Media Queries?

          Und überhaupt hat die Denke „Desktop, Tablet, Mobile“ nichts mit Web zu tun:

          “We’re using the words small and big, as opposed to mobile and desktop, because responsive design doesn’t think in terms of devices.”
          —Adam Silver in Form Design Patterns (welches eine sehr gute Anschaffung ist)

          LLAP 🖖

          -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann

          Folgende Nachrichten verweisen auf diesen Beitrag: