如何根据（较小的）窗口大小自定义CSS？

Question

所以我看到根据屏幕的大小来调用不同的css。

正常尺寸示例：

请注意，红色条没有任何margin-bottom，文本是自定义css （在额外的css文件中提供，而不是bootstrap.css）

小尺寸示例：

请注意，我添加的CSS基本消失了。

我该如何解决这个问题？ 我认为这是

@media (max-width: 767px)

但是在额外的css文件中添加它后，它不会得到修复。

这是我使用的CSS：

#The red bar
.top .alert {
margin-bottom: 0px;
}
#The text css
.very-big {
color: #20F587;
font-size: 115px;
text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
font-weight: bold;
}
.title-very-big {
color: #20F587;
font-size: 75px;
text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
font-weight: bold;
}
.p-very-big {
color: #20F587;
font-size: 15px;
text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
font-weight: bold;
}

Answer 1

检查它的网址会有所帮助。

说：

@media (max-width: 767px)中的任何内容 not 都会出现在更大的版本中。

max-width样式不会出现在大于设置的屏幕上（在您的情况下为767px），并且在屏幕至少与屏幕一样大之前不会显示min-width样式那个设定。因此，如果所需的边距和文本样式仅适用于大尺寸，则可能是因为它们位于某个min-width查询中，而不是max-width。

旁注：如果可能的话，删除不需要的样式而不是尝试覆盖样式会更好（并且使事情变得更容易）。

修改 我在http://mrblackdragonfly.com/404/

找到了您的网站

.top .alert有一个margin-bottom:0px;，但它位于(min-width: 768px)个查询中。将它移出那里，保证金问题应该消失。

您的文字风格也是如此。