Question

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

Apple iPad Mini的媒体查询

return

我的诺基亚Lumia 920代码；

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

因为它是诺基亚OS Windows，所以我写了@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; } }。

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

元标记；

display: -ms-grid;

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

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

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

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 。

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

第二，因为我将 Hover 参数（不带布局）分配给了我的诺基亚，因此它覆盖了..

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

现在将它交给我的诺基亚。

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

诺基亚Media Query覆盖Apple iPad Tablet

1 个答案: