针对移动设备不工作的CSS媒体查询

问题描述：

我正在使用媒体查询来开始使我的网站更具响应能力。但是，媒体查询在我的PC（Chrome）上工作得很好，但在移动设备（iPad和iPhone）上查看时，媒体查询似乎不起作用。我在头的视口标签，但我猜我失去了别的东西....针对移动设备不工作的CSS媒体查询

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>

小/大尝试远程调试的网页。一切看起来不错，它应该工作。另外作为一个方面说明手机使用非常沉重的缓存，所以尝试一个隐私浏览选项卡，以确保您的新样式应用。 –

1281px的屏幕仍然会触发@media（min-width：320px）。你应该尝试范围。 –

我同意范围。现在，我只是想让它工作。我尝试在我的iPad和iPhone上的Chrome中打开“隐身标签”，并且查询仍然无效......当我在我的设备上看到该页面时，#mainText文本为黑色... – mwilson

答

似乎有一个过滤器在您的css

filter: brightness(1%);

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

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

干杯和快乐编码！

我使用了什么选择器？我似乎有同样的问题。另外，你是怎么看到mwilson有过滤器的？ – JimJimL

@JimJimL只要类名在HTML中匹配，就可以使用任何选择器。我只是浏览了Chrome浏览器的开发者控制台，发现Chrome并没有应用这种风格。干杯! –

现在我很困惑，你在哪里得到他的应用程序/网页，通过开发人员工具中的CSS？我无法将它链接到任何地方。这也意味着我需要将亮度（1％）应用于所有对象！？我确定我在这里错过了一些东西。 – JimJimL

答

当你的查询可能会覆盖本身尝试类似的东西指定最小和最大宽度为您的查询总是1px的比前一个

@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媒体查询

相关推荐