我的css中的一些媒体查询被忽略

我有以下css。第一个'4栏'媒体查询工作，其余的被忽略。如果我在'1-column'之前放置'5-column'，那么'1-column'可以工作，但'1,6和7被忽略。如果我把6以上的工作，但1和5被忽略。无论我把它放在哪里，2,3和4列都可以继续工作。我没有看到问题。我希望任何人都可以帮助我。我的css中的一些媒体查询被忽略

#header-wrap { 
    border-bottom: 1px solid #EFEFEF; 
    margin: 32px 32px 16px; 
    padding: 0 0 32px; 
} 

/* 1 column */ 
@media all and (max-width: 607px) { 
    #header-wrap { 
    width: 256px; 
    } 
} 

/* 2 columns */ 
@media all and (min-width:607px) and (max-width:895px) { 
    #header-wrap { 
    width: 544px; 
    } 
} 

/* 3 columns */ 
@media all and (min-width:895px) and (max-width:1183px) { 
    #header-wrap { 
    width: 832px; 
    } 
} 

/* 4 columns */ 
@media all and (min-width:1183px) and (max-width:1471px) { 
    #header-wrap { 
    width: 1120px; 
    } 
} 

/* 5 columns */ 
@media all and (min-width:1471px) and (max-width:1759px) { 
    #header-wrap { 
    width: 1408px; 
    } 
} 

/* 6 columns */ 
@media all and (min-width:1759px) and (max-width:2062px) { 
    #header-wrap { 
    width: 1696px; 
    } 
} 

/* 7 columns */ 
@media all and (min-width:2062px) { 
    #header-wrap { 
    width: 1696px; 
    } 
}

来源

2014-02-26 silly putty

昆仑请您发表您的HTML代码？ – Pugazh

我复制你的代码，实际上它不会启动从第五媒体查询的CSS，采用clases而不是ID的没有工作，我尝试了几件事情，但没有工作，我会如果有人知道是有趣的这种行为。 – Zagen

这是HTML：

<！ - 标题 - 包装 - > –

得到它的工作here

出于某种原因，有以下一些您的交易方括号的点。不知道他们来自哪里。

我也下调媒体查询，以用更少的代码相同的效果。松散地说，瞄准屏幕有三种主要方法。你可以让你的风格：

风格倒例如(min-width:320px)，所以一切下到大小
风格了(max-width:480px)，一切高达到大小
支架(min-width:320px) and (max-width:480px)

你有什么就有什么包围，在那里，而不是允许范围内的样式媒体查询级联即1200像素宽屏幕符合(min-width:600px)和(min-width:1000px)所以你只需要应用样式的下限值的查询，你必须根据特定括号分辨率重新应用样式，如(min-width:600px) and (max-width:800px)。

这是一个完全合法的技术，但你会发现你最终得到了更多的代码，以保持如果曾经需要的任何变化。我很难学会这一点。 CSS旨在级联，而媒体查询是相同的。

最后，如果你打算使用支架的办法，尽量避免指定相同分辨率的两倍

即(min-width:320px) and (max-width:500px)然后(min-width:500px) and (max-width:900px)

，因为这可能会混淆一些浏览器或导致调整屏幕时闪烁，因为有一个像素符合这两个条件。安全的方式来写这将是：

`(min-width:320px) and (max-width:500px)`

然后(min-width:501px) and (max-width:900px)

做不到这一点，造型上下完全消除这种可能性:)

来源

2014-02-27 11:16:58 Timmah

哇你的答案和解释的感谢！你看到点的地方，我看到空格（所以我没有看到它们）。 –

我的css中的一些媒体查询被忽略

回答

相关问题