css - 诺基亚Media Query覆盖Apple iPad Tablet

我正在学习媒体查询。我正在尝试为this网页的各种设备提供不同的宽度。我构建了6个媒体查询（没有三星Galaxy，我稍后会做……），所有工作正常，但编写了诺基亚代码，它们覆盖了Apple iPad Tablet上的Hover。

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;
   }
}

因为是诺基亚OS 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>

我自从一个星期以来尝试展示它们...，请任何人帮助我解决此问题，非常感谢！

最佳答案

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

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

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

我什么时候应该写..

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

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

在诺基亚和Apple iPad mini中，他的起始宽度Parametar为768px ...

其次，因为我将诺基亚的“无布局悬停参数”给了我的诺基亚，所以它覆盖了..

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

现在把它给我的诺基亚。

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

关于css - 诺基亚Media Query覆盖Apple iPad Tablet，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54751242/