Wie kann Media Query überschreibung

[liebewinter]

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 !

[liebewinter]

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;

}

[Matthias Apsel]

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

[liebewinter]

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

[Gunnar Bittersmann]

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