css - 诺基亚媒体查询覆盖苹果 iPad 平板电脑

Question

我正在学习媒体查询。我正在尝试为来自 this 的不同设备提供不同的宽度网页 。我构建了 6 个媒体查询(没有三星 Galaxy，我稍后会做......)，一切正常但编写诺基亚代码，它们覆盖了 Apple iPad 平板电脑的悬停。

Apple iPad Mini 的媒体查询

@media only screen and (max-width: 64em) and (orientation: portrait)  {

  body {
    display: grid;
    background-color: #ebf5d7;
    grid-template-columns: 11% 76% 13%;
    grid-template-rows: auto auto 70vh auto;
    grid-row-gap: 5px;
    grid-template-areas:
       "header  header  header"
       "nav     nav     nav"
       "linkBox main    infoBox"
       "footer  footer  footer";
  }
  body > main {
   height: 70vh;
  }
  #name {font-size: 0.55em;}
  #email {font-size: 0.55em;}
  #text {font-size: 0.8em;}
  #comment {font-size: 0.5em;}
  #externalLinks a{text-align: left;}
  #externalLinks ul {margin: 2px;}

  #navs a{font-size: 15px;}
  #externalLinks ul {margin-left: -10px;}
  #externalLinks a  {font-size: 13px}
  .dropdown:hover .dropdown-content {
     left: 82px;
     top: 205px; 
  }       
}

  /* Tablet iPad 4 generation & iPad air, Landscape */

@media only screen and (min-width: 47.5em) 
               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: 78px;
         top: 238px; 
   }                    
}

我的诺基亚 Lumia 920 代码；

@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: 20% 70% 10%;
     grid-template-areas:

        "header   header    header"
        "nav      nav          nav"
        "linkBox  main     main"
       "footer   footer   footer";
     -ms-grid-columns: 20% 70% 10%;
     -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: 55px;
     margin-bottom: 1px; 
   }
   #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: 170px; 
   }  
}

因为它是诺基亚操作系统 Windows，所以我写了 display: -ms-grid; 。

Here来自 tablet_index.css 的所有媒体查询代码。

元标记；

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=utf-8">

我使用 PHP 代码导入/包含到 CSS 文件；

<style>
<?php 

   include 'CSS/me.css';
   include 'CSS/tablet_index.css';
?>
</style>

我已经有一个星期尝试展示它们了...，请任何人帮助我解决这个问题，非常感谢!

Answer 1

我找到了问题的解决方案...

首先，我写的诺基亚肖像中的媒体参数

@media only screen and (max-width : 47.5em) and (orientation : portrait) {

我什么时候应该写..

 @media only screen and (max-width : 460px) and (orientation : portrait) {

他们的参数如何give ... CSS 分辨率 460x768 。

在Nokia 和Apple iPad mini 他的宽度起始Parametar 是768px...

其次，因为我将没有布局的Hover参数传给了我的诺基亚，它覆盖了..

.dropdown:hover .dropdown-content {
  left: 42px;
  top: 170px; 
}  

现在把它交给我的诺基亚..

 body > #externalLinks .dropdown:hover .dropdown-content{
  left: 55px;
  top: 145px; 
}