Question

我有一个针对其的类，媒体查询如下：

(?<=\[\")[\w\s.]+(?=\"\])

中间媒体查询似乎不起作用。注意：媒体查询适用于移动设备

Answer 1

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

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

Answer 2

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

 @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;
      }
    }

Answer 3

您无需添加max-height，只需添加max-width，移动电话即可使用标准尺寸check this article here and how it work，因此只需添加类即可查询，例如：

@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
  }
}

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

完整示例：

HTML：

<!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>

CSS：

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;
}
}

And this is fiddle

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

3 个答案: