html - 试图让媒体查询在纵向或横向上工作

Question

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

非常感谢您的帮助，我知道为什么它不起作用，媒体查询对 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，这意味着“1”类。根据验证器，这不是一个有效的类。

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

清理错误。尝试通过W3C 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;
    }
}