只有第一个媒体查询工作 [英] Only first media query working

问题描述

使用媒体查询时，只有第一组似乎工作，我不知道为什么。如果我交换他们，然后仍然，只有第一个工作。我已经尝试从最大宽度更改为最小宽度，我已经尝试删除和条件，我已经尝试删除所有我的Javascript。我试图删除所有我的CSS，只有媒体查询body {display：none}。媒体查询在我的样式表的结尾。 Viewport meta是正确的（见下文）。

这些尝试都没有纠正我的问题。任何人都知道为什么这种情况发生？我已经使用过@media一百次，从来没有我有这个问题。

 < meta name =viewport content =width = device-width，initial-scale = 1.0> 
 
 @media（max-width：740px）and（min-width：420px）{
 .product {
 width：45％！important; 
 margin：10px 10px 10px 10px！important; 
} 
 
 .products-container select {
 width：85％; 
} 
} 
 
 @media（max-width：340px）{
 body {
 display：none; 
} 
} 
  

更新
我已经检查了FireFox的控制台。我实际上得到以下错误：
Dangling combinator。

我得到它想说的话，但查询语法没有问题。

在CSS中隐藏了一个隐藏的字符。这是奇怪的，考虑到我自己打字的一切，也许Dreamweaver把它放在那里？一个小故障可能？无论如何，将其复制到MS Word并将其粘贴回Dreamweaver后将其固定。

感谢您的帮助！

When using media queries, only the first set seems to work and I don't know why. If I swap them around, then still, only the first one works. I've tried changing from max-width to min-width, I've tried removing the and condition, I've tried removing all my Javascript. I've tried removing all my CSS, having only the media queries with body {display:none}. The media queries are at the end of my stylesheet. Viewport meta is correct (see below).

None of these attempts corrected my problem. Anyone got any idea why this is happening? I've worked with @media a hundred times and never have I had this problem.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

@media (max-width: 740px) and (min-width: 420px) {
    .product {
        width:45% !important;
        margin:10px 10px 10px 10px !important;
    }

    .products-container select {
        width:85%;
    }   
}​

@media (max-width: 340px) {
    body {
        display:none;
    }
}​

Update I've checked FireFox's console. I'm actually getting the following error: Dangling combinator. Ruleset ignored due to bad selector.

I get what it's trying to say, but there's nothing wrong with the queries' syntax.

解决方案

Nevermind, figured it out.

There somehow was a hidden character in the CSS. This is odd considering that I typed everything else myself, maybe Dreamweaver put it there? A glitch maybe? Anyway, copying it over to MS Word and pasting it back into Dreamweaver fixed it.

P.S Thanks for your help!

这篇关于只有第一个媒体查询工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！