Media Queries für Tablet nicht funzioniert
liebewinter
- css
- meinung
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 !
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...
Aber gibt es für mich eine kleine Problem.. , wie kann mit dem classe hier arbeite ?
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..
aber das Probleme habe mit dem portrait…
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...
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...