CSS 媒体查询没有越界
CSS Media Query not over riding
我一直在做 max-width
媒体查询,但我知道 bootstrap 做 min-width
风格的媒体查询,我正在尝试在我当前的项目中遵循这种风格。
我有以下class声明(这里没有媒体查询)
.Mobilemenutrigger {
padding: 2px 12px 2px 12px;
background: #6bb854;
display: inline-block;
float:right;
margin-right: 20px;
margin-top: 20px;
}
然后按照bootstrap的媒体查询约定,我有以下
@media (min-width: 768px) {
.Mobilemenutrigger {
display: none;
}
}
然而,当我在我的浏览器中查看它时,正在应用原始声明,媒体查询并没有像我认为的那样覆盖原始声明。
我知道我可以将 !important
扔到媒体查询上,但我的印象是在执行 min-width
样式的媒体查询时不需要这样做。我在这里错过了一些非常明显的东西吗?
确保浏览器在读取初始 class 属性后读取您的媒体查询。
您的文件的加载顺序是什么?如果 main.css 在 media.css 之后加载,它将无法正常运行。尝试在最后附加 media.css,看看会发生什么。
由于相同 specificity,您必须在初始声明后添加媒体查询。
如果您颠倒顺序,将导致通用规则覆盖媒体查询的规则。
按此顺序写入,它将 运行 正确显示 here:
.Mobilemenutrigger {
padding: 2px 12px 2px 12px;
background: #6bb854;
display: inline-block;
float:right;
margin-right: 20px;
margin-top: 20px;
}
@media (min-width: 768px) {
.Mobilemenutrigger {
display: none;
}
}
相反,如果您颠倒顺序,并且屏幕宽度超过 768px,首先,mediaquery 将设置 display: none;
,然后更通用的规则将使用 display: inline-block;
覆盖它
我一直在做 max-width
媒体查询,但我知道 bootstrap 做 min-width
风格的媒体查询,我正在尝试在我当前的项目中遵循这种风格。
我有以下class声明(这里没有媒体查询)
.Mobilemenutrigger {
padding: 2px 12px 2px 12px;
background: #6bb854;
display: inline-block;
float:right;
margin-right: 20px;
margin-top: 20px;
}
然后按照bootstrap的媒体查询约定,我有以下
@media (min-width: 768px) {
.Mobilemenutrigger {
display: none;
}
}
然而,当我在我的浏览器中查看它时,正在应用原始声明,媒体查询并没有像我认为的那样覆盖原始声明。
我知道我可以将 !important
扔到媒体查询上,但我的印象是在执行 min-width
样式的媒体查询时不需要这样做。我在这里错过了一些非常明显的东西吗?
确保浏览器在读取初始 class 属性后读取您的媒体查询。
您的文件的加载顺序是什么?如果 main.css 在 media.css 之后加载,它将无法正常运行。尝试在最后附加 media.css,看看会发生什么。
由于相同 specificity,您必须在初始声明后添加媒体查询。
如果您颠倒顺序,将导致通用规则覆盖媒体查询的规则。
按此顺序写入,它将 运行 正确显示 here:
.Mobilemenutrigger {
padding: 2px 12px 2px 12px;
background: #6bb854;
display: inline-block;
float:right;
margin-right: 20px;
margin-top: 20px;
}
@media (min-width: 768px) {
.Mobilemenutrigger {
display: none;
}
}
相反,如果您颠倒顺序,并且屏幕宽度超过 768px,首先,mediaquery 将设置 display: none;
,然后更通用的规则将使用 display: inline-block;