Css 媒体查询不适用于移动设备_Css

Css 媒体查询不适用于移动设备

css

Css 媒体查询不适用于移动设备,css,Css,我有一个类，媒体查询如下： @仅媒体屏幕和（最大宽度：374px）{ 宽度：62px； } @仅介质屏幕和（最大高度：413px）和（最小宽度：375px）{ 宽度：75px； } @仅介质屏幕和（最小宽度：414px）{ 宽度：85px； } 中间媒体查询似乎不起作用。注意：媒体查询是针对移动设备的如注释中所述，您需要指定要应用样式的元素。例如： @media screen and (max-width:1000px){ .your-class{ height:100px; }

我有一个类，媒体查询如下：

@仅媒体屏幕和（最大宽度：374px）{
宽度：62px；
}
@仅介质屏幕和（最大高度：413px）和（最小宽度：375px）{
宽度：75px；
}
@仅介质屏幕和（最小宽度：414px）{
宽度：85px；
}

中间媒体查询似乎不起作用。

注意：媒体查询是针对移动设备的

如注释中所述，您需要指定要应用样式的元素。例如：

@media screen and (max-width:1000px){
 .your-class{
   height:100px;
 }
}

您没有在媒体查询中指定要应用样式的类名

 @media only screen and (max-width: 374px) {
    .your_class_name {
      width: 62px;
     }
    }
    @media only screen and (max-height: 413px) and (min-width: 375px) {
      .your_class_name {
        width: 75px;
      }
    }
    @media only screen and (min-width: 414px) {
      .your_class_name {
        width: 85px;
      }
    }

您不需要添加

max height

，只需添加

max width

，移动电话有标准尺寸，因此只需将类推送到查询中即可，例如：

@media only screen and (max-width: 374px) {
  .class{
     //style here will display on sizes from 0px to 374px
  }
}

@media only screen and (min-width: 375px) {
  .class{
     //style here will display start display from 375px
  }
}

@media only screen and (min-width: 414px) {
  .class{
     //style here will display start sizes from 414px
  }
}

还包含几乎所有大小的媒体查询

完整示例：

HTML:

您没有指定任何要应用样式的类或标记，即

max height

？看来你的意思是要把你的全部文件发出去，我们可以帮你吗？如果将其放入声明块中，则语法将是有效的SCS。我添加了一个完整的示例，我认为您忘记添加

标记，因此请检查示例，我建议删除最大高度，我已更新了答案

<!doctype html>
<meta name="viewport" content="width=device-width"/>

<body>

    <h1>Media Queries Examples</h1>
    <p>Increase or decrease the size of your window to see the background color change</p>

</body>

p{
 font-family: arial,san-serif;   
    font-size: 13px;
    font-color: black;
}

h1{
 font-size:30px;   
}

@media screen and (min-width:761px){
    body{
    background-color:white;
}
 h1{
    color:red;
}    
}

@media screen and (max-width:760px){
       body{ background-color: #333;
    }
 h1{
    color:red;
}  
p{
    color: white;
}
}

@media screen and (max-width:480px){
       body{ background-color: #807f83;
    }
 h1{
    color:white;
}  
p{
    color: white;
}
}

@media screen and (max-width:360px){
       body{ background-color: #0096d6;
    }
 h1{
    color:white;
    font-size:25px;
}  
p{
    color: white;
}
}