试图让媒体查询在Portrait或Landscape上运行

Question

在这里，这是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;
}

}

Answer 1

所以，问题主要有两个方面：

1）你的css中有几个错误。使用验证器，我发现了13个错误。      - 那些未公开的声明（缺少一个结束的大括号 - }），例如你对#nav a:hover的声明      - 在其他位置有额外/流浪关闭花括号。      - 背景颜色和颜色属性无效      - 你有div.1，它意味着一个＆＃34; 1＆＃34;。根据验证器，这不是有效的类。

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

清理错误。尝试在W3C CSS validator中运行它们 - 您可以直接复制并粘贴您的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;
    }
}