sorry about my English … my html/css knowledge it is very sample…
I am since a Week try to build a File for Media Query… , for my Web Page . My problem is that i don’t understand gut , how working Media Query and PX … .
From this web Page I building 5 media Query (without Samsung Galaxy ,it i will later to do …) , but Nokia making Problem , it overwrite my Media Query from Apple iPad Mini …
When build on @media only screen and (max-width : 47.5em) and (orientation : portrait) the Grid again ,
body > header , body > nav ,… , in my iPad Tablet the Hover change…
Problem making only Portrait from Nokia on Landscape from Apple iPad Mini 
The Media Query from Nokia;
@media only screen
and (max-width : 48em) and (orientation : landscape) {
body {
display: -ms-grid;
display: grid;
grid-row-gap: 5px;
background-color: #ebf5d7;
grid-template-columns: 9% 75% 16%;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main infoBox"
"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: 60px;
margin-bottom: 1px;
}
#navs a{
font-size: 11px;
}
#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: 64px;
top: 194px;
}
}
@media only screen
and (max-width : 47.5em) and (orientation : portrait) {
body {
display: -ms-grid;
display: grid;
grid-row-gap: 5px;
background-color: #ebf5d7;
grid-template-columns: 12% 78% 10%;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main infoBox"
"footer footer footer";
-ms-grid-columns: 12% 78% 10%;
-ms-grid-row: 120px 80px 103px 200px 110px 90px;
-ms-grid-gap: 5px;
}
#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: 180px;
}
}
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;
}
maybe play a role how to build my Media Query for Internet Explorer ?
@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;
}
I will my Media Query build for Desktop, Tablets and Smartphones .
Can please anyone tell me how prevent overwrite on Media Query , Thanks !