Question

我正在处理媒体查询，以便让我的网站更具响应性。但是，媒体查询在我的PC（Chrome）上工作得很好，但在移动设备（iPad和iPhone）上查看时，媒体查询似乎没有生效。我的头部有视口标记，但我猜我错过了其他的东西......

CSS

@media (min-width:320px) { 
    /* smartphones, iPhone, portrait 480x320 phones */ 
    #mainText {
        color: pink;
    }
}
@media (min-width:481px) { 
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
    #mainText {
        color: blue;
    }
}
@media (min-width:641px) { 
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    #mainText {
        color: red;
    }
}
@media (min-width:961px) { 
    /* tablet, landscape iPad, lo-res laptops ands desktops */ 
    #mainText {
        color: yellow;
    }
}
@media (min-width:1025px) { 
    /* big landscape tablets, laptops, and desktops */ 
    #mainText {
        color: green;
    }
}
@media (min-width:1281px) { 
    /* hi-res laptops and desktops */ 
    #mainText {
        color: purple;
    }
}

HTML

<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<div id="mainText">
    <h1>Text</h1>
    <h2>Text</h2>
</div>

Answer 1

你的css中似乎有一个过滤器

filter: brightness(1%);

现在因为你没有为webkit添加任何供应商前缀，chrome只是决定忽略它。您可以删除此规则或将以下内容添加到您的CSS中。

-webkit-filter: brightness(1%);
filter: brightness(1%);

干杯和快乐的编码！

Answer 2

由于您的查询可能会覆盖自己，请尝试类似的操作指定查询的最小和最大宽度，这些宽度始终比前一个小1个/更大

 @media (max-width:320px) { 
    /* smartphones, iPhone, portrait 480x320 phones */ 
    #mainText {
        color: pink;
    }
}
@media (min-width:321px) and (max-width:481px) { 
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
    #mainText {
        color: blue;
    }
}
@media (min-width:482px) and (max-width:641px) { 
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    #mainText {
        color: red;
    }
}
@media (min-width:642px) and (max-width:1024px) { 
    /* tablet, landscape iPad, lo-res laptops ands desktops */ 
    #mainText {
        color: yellow;
    }
}
@media (min-width:1025px) and (max-width:1280px){ 
    /* big landscape tablets, laptops, and desktops */ 
    #mainText {
        color: green;
    }
}
@media (min-width:1281px) { 
    /* hi-res laptops and desktops */ 
    #mainText {
        color: purple;
    }
}

移动设备的CSS媒体查询不起作用

2 个答案: