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 zum Thema:

  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