时间戳

首页 > 解决方案 > 媒体查询不适用于移动设备

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

问题描述

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

@media only screen and (max-width: 374px) {
  width: 62px;
}

@media only screen and (max-height: 413px) and (min-width: 375px) {
  width: 75px;
}

@media only screen and (min-width: 414px) {
  width: 85px;
}

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

标签： css

解决方案

你不需要添加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：

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

这是小提琴

推荐阅读