css - 媒体查询覆盖方向纵向

Question

我正在学习媒体查询。我正在尝试为来自 this 的不同设备提供不同的宽度网页 。我构建了 6 个媒体查询(没有 Samsung Galaxy，我稍后会做……)，但它们覆盖了我的 Desktop 和 Nexus Portrait。

此设备的媒体查询；

/*   My Desktop    1280 x 1024 */

@media only screen and (min-width: 65em) and (max-width: 80em) {  
body {

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

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


/* Nokia Lumia 920  */

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

/* Tablet Nexus 7  (Portrait) */

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


/* Smartphones iPhone 3-4-5(Portrait)  */

@media screen and (min-width: 20em) 
          and (max-width: 30em) 
          and (orientation: portrait){

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 (min-width: 65em) and (max-width: 80em) {

我在应该写 grid-row-gap 的时候写了 grid-gap 。

稍后在我的 Nexus @media only screen and (max-width: 38em) and (orientation: portrait){

更改我的悬停；

.dropdown:hover .dropdown-content {

  left: 80px;
  top: 182px; 
}