liebewinter: Media Queries für Tablet nicht funzioniert

hallo , versuche mit einem Online-virtualization sehe wie meine Website aussiehst .

Wie meine Website aussiehst mit diesen Tablet Online-virtualization…

In Css habe dieser Code gegeben um meine Website in Tablet zu sehen..

@media screen and (min-width: 40em) {
  body {
    display: grid;
    grid-template-columns: 10% 72% 17%;
      grid-template-areas:
  "header  header  header"
  "nav     nav     nav"
  "linkBox main    infoBox"
  "footer  footer  footer";
  }
}


@media screen and (min-width: 30em) {
#externalLinks  a  {
    text-decoration: none;
	display: block;
	text-align: center;

    font-size: 15px;
	font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
 }

li a, .dropbtn {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;

 }

}
 

@media (min-width: 48em) and (max-width: 64em) {
  
 #externalLinks  a  {
    text-decoration: none;
	display: block;
	text-align: center;
    font-size: 15px;
	font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
  }
li a, .dropbtn {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;

 }

}
 


@media (min-width: 48em) and (max-width: 64em) and (orientation: landscape) {
  
 #externalLinks  a  {
    text-decoration: none;
	display: block;
	text-align: center;
    font-size: 15px;
	font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
  }
li a, .dropbtn {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;

 }

}
 

aber dieser Code , hat keine Wirkung ...

Kann Bitte jemand hilfe um dieses probleme zu losen , Danke !

akzeptierte Antworten

  1. so , jetzt verstehe warum mit diesen Code nicht funzioniert ... es fällt mir, mein Grid ... ,nach dem ich dieser website gesehen habe ,habe mich erinnert , das ich mein website gebaut habe… um in Desktop Rechner zu sehenn...

    @media screen and (min-width: 40em) {
      body {
        display: grid;
        grid-template-columns: 10% 72% 17%;
          grid-template-areas:
      "header  header  header"
      "nav     nav     nav"
      "linkBox main    infoBox"
      "footer  footer  footer";
      }
    }
    
    

    Jetz muss machen gleich , aber mit eine kleine em Wert als vom Oben , für Tablet..

    @media (min-width: 30.0625em) and (max-width: 47.9375em) {
     
     body { 
        display: grid;
        grid-template-columns: 10% 72% 17%;
          grid-template-areas:
        "header  header  header"
        "nav     nav     nav"
        "linkBox linkBox linkBox"
        "main    infoBox"
        "footer  footer  footer";
      }
      
    }
    

    so , wie jetzt sie siehst auf einen "Tablet" aus...

    wie aussiehst auf einen tablet

    Aber gibt es für mich eine kleine Problem.. , wie kann mit dem classe hier arbeite ?

  2. so , etwas habe gelern warum Media Query nicht funzioniert…

    ich habe einiger Fehler gemacht …

    • nach @media , muss etwas kommt ,screen , print oder … (ich habe in einiger Beispiel nicht geschrieben...)

    • Man muss sehe ob Probleme auf portrait oder landscape hat … (um lösugen zu finde man muss wiessen der PX vom Gerät...)

    .... und noch anderen…

    Jetzt habe mit diesem Code für einen Google Nexus 7 966x603 versucht..

    @media screen and (min-width: 30.06em) and (max-width: 38.6875em) {
    
        body {
         
          display: grid;
          grid-template-columns: 17% 72% 9%;
          grid-gap: 5px;
          grid-template-areas:
           "header  header  header"
           "nav     nav     nav"
           "linkBox main    infoBox"
           "footer  footer  footer";
        }
    }  
    
    

    meine Breite (landscape) kommt gut , wie der Screenshot zeigt..

    wie meine landscape aussiehst

    aber das Probleme habe mit dem portrait

    wie meine portrait aussiehst

    wie der Screenshot zeigt , nach Unten den footer , gibt es Platz , aber ich weiss nicht wie er gekommt hat ... und was kann ich mache um das ganze Bildschirm von meine Website gezeigt wird...

    1. so , ich habe auf andere Forum gefragt und haben mir der Fehler gesagt , warum dieser Probleme bekommt..

      Weil ich nicht viel Platz auf Vertikal gegeben haben , bekomme diser extra Platz..mit dieser Code verhindert es...

      body > main {
        height: 70vh;
      }
      

      auch habe ich gebaut <aside id="furtherInformation"></aside> , aber habe keine Wert gegeben ,aber CSS versucht dieser Platz mit grid-gap auf dem Bottom zu geben..mit dieser Code verhindert es…

      body {
        grid-template-rows: auto auto 70vh auto;
      }
      

      ich habe nicht auf meinen grid-template-columns: 17% 72% 9%; , nicht 100% Platz gegeben , sonder 98%.. jetzt geben es...

      grid-template-columns: 17% 74% 9%;
      

      jetzt habe dieser Proble gelöscht , wie der Screenshot zeigt...

      wie jetzt meine Tablet aussiehst