解析媒体查询中的层次结构

时间:2014-05-22 14:11:18

标签: html css media-queries

在这些日子里,我遇到了媒体查询的问题: 起初我创建了两个单独的CSS,一个用于样式,一个用于媒体查询,但它没有正常工作,它在任何浏览器上都没有做任何事情; 所以我把所有的CSS都放在一个文件中,现在就可以了。

1 - 所以我的第一个问题是,解决我的媒体查询的最佳“地方”是什么?

我遇到的第二个问题是我需要更改填充属性,这些属性在我的CSS顶部声明为接近。当我想知道用MediaQuery改变这个属性时,它什么也没做。 所以我将它们从我的css顶部移到媒体查询附近,现在它正在运行。

2 - 我的第二个问题是,当你必须处理媒体查询时,是否存在一个删除css类和ID的层次结构?

3 - 问题可能出在<head>部分吗?

(如果你有一些我可以阅读的资源,它可以帮助所有想澄清这些问题的人。提前致谢!!)

2 个答案:

答案 0 :(得分:1)

如果没有看到您的代码,您可能会遇到一些特殊性和排序方面的问题。

要记住的事情:

  • 浏览器总是更喜欢比一般规则更具体的规则(p.link{}规则比p{}规则更具体,因此会覆盖任何共享属性)

  • 浏览器通常会在页面上“渲染CSS”,这意味着最后定义的属性将覆盖任何以前写入的属性。换句话说,如果您要包含两个样式表,请确保第二个包含媒体查询样式表,如果您希望其规则具有优先权。

回答问题:

1)'最佳位置'实际上是一种风格。有些人喜欢单独的样式表以保持整洁,其他人则喜欢在规则本身内部保持简洁。只要它们出现在你的正常规则之后,你就应该清楚了。

2)媒体查询中的代码应该与媒体查询中不存在的代码完全相同。层次结构没有区别。

3)如果没有看到你的代码,很难说。

很棒的CSS资源:

答案 1 :(得分:0)

  1. 那是主观的
  2. 媒体查询不会改变the cascade的规则
  3. 由于CSS(样式属性除外)必须放在head元素内,大概就是你的CSS所在,所以可能是你的问题所在。