@media with same px

HTML-CSS
#1

hi , sorry about my English…

I to try build a Media Query for Tablets , my Problem is which have same PX for two Tablets…

For iPad Tablets

@media only screen and (min-width: 48em) 
                   and (max-width: 64em) 
                   and (orientation: landscape)

with this emulator

and for Nokia Tablet

@media only screen 
and (max-width : 48em) and (orientation : landscape) {

With this Emulator

That problem is because both have same PX , when write of one Media Query , change the layout of another…

Can please anyone help me , Thanks !

#2

What are the responsive design needs of your application and how do they differ between each tablet?

I usually use media queries to keep my website looking good at different screen widths. Sometimes I need more than one media query, but I don’t plan for the specific device being used.

Can you explain more?

Would this not work for you?

@media only screen and (max-width: 64em) {
  /*Put CSS for screens that are smaller than 64em here*/
}

@media only screen and (max-width: 48em) {
  /*Put CSS for screens that are smaller than 48em here*/
}
#3

very thanks for your answer !

What are the responsive design needs of your application and how do they differ between each tablet?

Media query for iPad

@media only screen and (min-width: 48em) 
                   and (max-width: 64em) 
                   and (orientation: landscape){
    body {
     
      display: grid;
      background-color: #ebf5d7;
      grid-template-columns: 8% 77% 15%;
      grid-row-gap: 5px;
      grid-template-areas:
       "header  header  header"
       "nav     nav     nav"
       "linkBox main    infoBox"
       "footer  footer  footer";
    }
    body > header {
         background-image: url("Bilder/view.png");
         background-repeat: no-repeat;
         padding: 80px;
         margin-bottom: -8px; 
        
    }
    #navs a{
        font-size: 15px;
    }
    #externalLinks ul {
       margin-left: -10px;
    }
    #externalLinks a	{
        font-size: 13px;
    }
    .dropdown:hover .dropdown-content {

     left: 81px;
     top: 238px; 
    }                    
                  
}

Media Query for 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 120px 200px 80px 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.8em;}
    #email {font-size: 0.8em;}
    #test {font-size: 1.5em;}
    
      /* HOVER  */
    
    .dropdown:hover .dropdown-content {

      left: 64px;
      top: 227px; 
    }  
}

because Nokia is for Windows , i will to add to my Nokia the -ms-grid

@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: 1em;}
    #email {font-size: 1em;}
    #text {font-size: 0.5em;}
    
      /* HOVER  */
    
    .dropdown:hover .dropdown-content {

      left: 67px;
      top: 187px; 
    }  
} 
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;
  margin-bottom: -8px; 
    
}

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;

}

Would this not work for you?

@media only screen and (max-width: 64em) {
/Put CSS for screens that are smaller than 64em here/
}

@media only screen and (max-width: 48em) {
/Put CSS for screens that are smaller than 48em here/
}

The @media only screen and (max-width: 64em) overwrite @media only screen and (max-width: 48em)

#4