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

所以我看到有一个不同的CSS调用，取决于屏幕有多大。如何根据（较小）窗口大小自定义CSS？

例正常大小：

注红酒吧没有任何边距和文本是自定义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; 
}

来源

2014-02-19 MrBlackDrag0nfly

如果您能向我们展示您的自定义CSS，它可能会更容易回答您。 –

是的，我已经添加了它。 – MrBlackDrag0nfly

URL，以检查它是否将是有益的。

谓曰：

任何东西@media (max-width: 767px)将不出现在更大的版本。

max-width样式不会在屏幕上比设定大出现（在你的情况767px）和min-width样式不会出现，直到屏幕至少是一样大的设置。所以如果所需的页边距和文本样式只能在较大的尺寸下工作，可能是因为它们在某个地方处于min-width查询中，而不是max-width。

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

编辑： 我发现你的网站在http://mrblackdragonfly.com/404/

的.top .alert有，但它是一个(min-width: 768px)查询中。将其移出并保证金问题应该消失。

这同样适用于您的文本样式。

来源

2014-02-19 21:34:42 jakealbaugh

这是完全独特的CSS，并没有覆盖任何东西。我对@media也不是很好，你可以给一个初学者的答案吗？ O，这是网址：http://mrblackdragonfly.com/404/ – MrBlackDrag0nfly

删除style.css中的第49和52行 – jakealbaugh

想像媒体查询，如身体类或其他东西。例如：'body.min767 p {font-size：12px}'将覆盖'p {font-size：16px}' – jakealbaugh

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

回答

相关问题