Html 尝试让媒体查询在纵向或横向上工作

这是css，下面是媒体查询，只要搜索@media，它就会找到它

非常感谢你的帮助，idk为什么它不起作用，媒体查询对ipad模拟器没有影响，在纵向模式下，我改变了背景只是为了看看它是否起作用，但它仍然不起作用，所以不确定发生了什么

body {background-image:url('../images/space1.jpg');
    background-repeat:no-repeat;
    background-size:200%;
}

body {
    color:white;
}

a, a:visited { 
    color:#3399FF; text-decoration:none;
}

div.header{
    text-align:right;
    font-size:200%;
}

div.header1 {
    text-align:right;
    font-size:125%;
}

div.logo{
    margin-top:-40px;
}

#nav{
    width:85%;
    height:3%;
    font-size: 26px;
    font-weight: bold;
    background-color: ;
    border-radius: 8px;
    text-align: center;
    margin: 0 auto;
    position:absolute;
    top:100px;
    left:120px;
}

#nav ul {
    height: auto;
    padding: 0px 0px;
    margin: 0px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc; 
    display: inline-block;
}

#nav li { 
    display: inline-block;
    padding: 20px; 
    margin-left: auto;
    margin-right: auto;
}

#nav a {
    text-decoration: none;
    color: :#3399FF;
    padding: 8px 8px 8px 8px;
}

#nav a:hover {
    color: #000000;
    background-color: #FFF;

li:hover ul { 
    display: block; 
}

}

nav ul ul {
    display: none;
}

nav ul li:hover > ul {
    display: block;
}

div.qui {
    text-align:center;
    font-size:200%;
    text-decoration:underline;
}

div.specs {
    text-align:center;
    font-size:175%;
}

ul.qui {
    text-align:center;
    font-size:150%;
    list-style-type: none;
}

.images {
    overflow: hidden;
}

.images img {
    float: left;
    margin: 0px;
}

div.1 {
  text-align: center;      
}

.left {
    float: left;
    margin-left:20%;
    padding:10px;
    border:3px solid #585858 ;
}

.right {
    float: right;
    margin-right:20%;
    padding:10px;
    border:3px solid #585858 ;
}

p.v {
    text-align:center;
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

    div.header{
        text-align:right;
        font-size:120%;
    }

    div.header1 {
        text-align:right;
        font-size:85%;
    }

    div.logo{
        margin-top:-40px;
    }

    div.logo {
        img
        height:150px;
        width:320px;
}   

    #nav{
        width:85%;
        height:3%;
        font-size: 30%;
        font-weight: bold;
        background-color: ;
        border-radius: 8px;
        text-align: center;
        margin: 0 auto;
        position:absolute;
        top:100px;
        left:120px;
    }

    #nav ul {
        height: auto;
        padding: 0px 0px;
        margin: 0px;
        background-color: #f2f2f2;
        border-bottom: 1px solid #ccc; 
        display: inline-block;
    }

    #nav li { 
        display: inline-block;
        padding: 5px; 
        margin-left: auto;
        margin-right: auto;
    }

    #nav a {
        text-decoration: none;
        color: :#3399FF;
        padding: 8px 8px 8px 8px;
    }

    #nav a:hover {
        color: #000000;
        background-color: #FFF;

    li:hover ul { 
        display: block; 
    }
}

nav ul ul {
    display: none;
}

nav ul li:hover > ul {
        display: block;
}

div.qui {
    text-align:center;
    font-size:200%;
    text-decoration:underline;
}

div.specs {
    text-align:center;
    font-size:175%;
}

ul.qui {
    text-align:center;
    font-size:150%;
    list-style-type: none;
}

.images {
    overflow: hidden;
}

.images img {
    float: left;
    margin: 0px;
}

div.1 {
  text-align: center;      
}

.left {
  float: left;
  margin-left:0%;
  padding:0px;
   border:3px solid #585858 ;
}

.right {
  float: right;
  margin-right:0%;
  padding:0px;
   border:3px solid #585858 ;
}

p.v {
    text-align:center;
}

}

---

因此，问题主要有两个方面：

1） 您的css中有几个错误。使用验证器，我发现了13个错误。 -有些声明是未关闭的（缺少一个关闭的大括号-

}

），例如您的

#nav a:hover

-在其他位置有额外的/零散的收尾花括号。 -背景色和颜色属性无效 -您有div.1，这意味着一个类为“1”。根据验证器，这不是一个有效的类

2） 媒体查询包含的规则太多。您应该只在媒体查询中放置替换/覆盖以前的规则或新规则的规则。您有许多规则只是其他常见css规则的重复

清理错误。尝试通过运行它们-您可以直接复制和粘贴css，以查看是否/哪里有错误

然后，简化媒体查询css，使其仅包含必要的更改规则（以及需要更改的特定属性）

注意：我可以通过清除错误来验证它。下面是有效/干净的CSS，供您参考

您仍然需要简化，下面的代码不一定能正常工作。我鼓励您过度简化—在媒体查询中输入一条规则，以获取边框、背景色或其他内容，只是为了查看媒体查询是否被选中。然后可以添加所需的不同样式

body {background-image:url('../images/space1.jpg');
    background-repeat:no-repeat;
    background-size:200%;
}

body {
    color:white;
}

a, a:visited { 
    color:#3399FF; 
    text-decoration:none;
}

div.header{
    text-align:right;
    font-size:200%;
}

div.header1 {
    text-align:right;
    font-size:125%;
}

div.logo{
    margin-top:-40px;
}

#nav{
    width:85%;
    height:3%;
    font-size: 26px;
    font-weight: bold;
    border-radius: 8px;
    text-align: center;
    margin: 0 auto;
    position:absolute;
    top:100px;
    left:120px;
}

#nav ul {
    height: auto;
    padding: 0px 0px;
    margin: 0px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc; 
    display: inline-block;
}

#nav li { 
    display: inline-block;
    padding: 20px; 
    margin-left: auto;
    margin-right: auto;
}

#nav a {
    text-decoration: none;
    color:#3399FF;
    padding: 8px 8px 8px 8px;
}

#nav a:hover {
    color: #000000;
    background-color: #FFF;
}

li:hover ul { 
    display: block; 
}


nav ul ul {
    display: none;
}

nav ul li:hover > ul {
    display: block;
}

div.qui {
    text-align:center;
    font-size:200%;
    text-decoration:underline;
}

div.specs {
    text-align:center;
    font-size:175%;
}

ul.qui {
    text-align:center;
    font-size:150%;
    list-style-type: none;
}

.images {
    overflow: hidden;
}

.images img {
    float: left;
    margin: 0px;
}

div.one {
  text-align: center;      
}

.left {
    float: left;
    margin-left:20%;
    padding:10px;
    border:3px solid #585858 ;
}

.right {
    float: right;
    margin-right:20%;
    padding:10px;
    border:3px solid #585858 ;
}

p.v {
    text-align:center;
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

    div.header{
        text-align:right;
        font-size:120%;
    }

    div.header1 {
        text-align:right;
        font-size:85%;
    }

    div.logo{
        margin-top:-40px;
    }

    div.logo {
        height:150px;
        width:320px;
    }   

    #nav{
        width:85%;
        height:3%;
        font-size: 30%;
        font-weight: bold;
        border-radius: 8px;
        text-align: center;
        margin: 0 auto;
        position:absolute;
        top:100px;
        left:120px;
    }

    #nav ul {
        height: auto;
        padding: 0px 0px;
        margin: 0px;
        background-color: #f2f2f2;
        border-bottom: 1px solid #ccc; 
        display: inline-block;
    }

    #nav li { 
        display: inline-block;
        padding: 5px; 
        margin-left: auto;
        margin-right: auto;
    }

    #nav a {
        text-decoration: none;
        color:#3399FF;
        padding: 8px 8px 8px 8px;
    }

    #nav a:hover {
        color: #000000;
        background-color: #FFF;
    }

    li:hover ul { 
        display: block; 
    }



 nav ul ul {
        display: none;
    }

    nav ul li:hover > ul {
            display: block;
    }

    div.qui {
        text-align:center;
        font-size:200%;
        text-decoration:underline;
    }

    div.specs {
        text-align:center;
        font-size:175%;
    }

    ul.qui {
        text-align:center;
        font-size:150%;
        list-style-type: none;
    }

    .images {
        overflow: hidden;
    }

    .images img {
        float: left;
        margin: 0px;
    }

    div.one {
      text-align: center;      
    }

    .left {
      float: left;
      margin-left:0%;
      padding:0px;
       border:3px solid #585858 ;
    }

    .right {
      float: right;
      margin-right:0%;
      padding:0px;
       border:3px solid #585858 ;
    }

    p.v {
        text-align:center;
    }
}

---

显示@media查询部分。你所拥有的只是css，没有媒体查询功能。这就是我现在尝试的，@media-only屏幕和（最小设备宽度：768px）和（最大设备宽度：1024px）和（方向：纵向）{但还是不行，我在css中更改了背景，只是为了看看它是否适用于ipad肖像，没有。在你的css中显示它。编辑你的问题，并在问题中显示它，否则我们无法完全排除故障/查看你在做什么。好了，很抱歉看到这篇文章。我怀疑它会帮助你了解发生了什么：好的，我只是继续清理我的css，只是为了让我自己知道出了什么问题。我尝试了你发布的媒体查询内容，并更改了背景颜色，但由于某些原因它无法工作。我正在使用ipadpeek.com并测试url@Terry-css仍然无效。你可以从url进行测试。以下是我得到的结果：谢谢，我得到了它影响ipad肖像，只有一个问题，是否可以用一个简单的命令将导航条居中对齐，而不是使用边距直到看起来居中？文本对齐：居中；似乎没有实际居中itok，但现在横向一个没有效果，ug（方向：横向）可能无法在emulator上工作？嗯