如何修复一些不适用于@media 屏幕和（最大宽度：768px）的 CSS 样式？答案

【问题标题】：how to fix some css styles not apply in @media screen and(max-width: 768px)?如何修复一些不适用于@media 屏幕和（最大宽度：768px）的 CSS 样式？
【发布时间】：2014-05-22 18:38:42
【问题描述】：

原始 CSS

.form-head {margin: 0 auto;  max-width: 66.5em; padding-bottom: 5.2em; }
.footleft{ max-width: 47.0%;float:left; margin-left: 2.8em; }
.footright{max-width: 46.9%; float:right; padding-bottom: 2%;}

媒体查询

@media screen and(max-width: 768px) {
    .form-head { margin: 0 auto !important; max-width: 56.5em !important ; }
    .gradiant{min-width: 50% !important;} 
    .post-contents { max-width: 64.4%; }
    .footleft{float:none; max-width:79%; margin:0 auto;}
    .footright{float:none; max-width:83%; margin:0 auto;}
    .footercontainer {margin: 0 auto; width:94%;}
}

媒体查询样式不会覆盖原始 css 。当我添加 !important 时，它正在工作，但我想获得媒体查询样式，不包括 !important。

【问题讨论】：

您有该网站的链接吗？
不，我没有得到链接
我的意思是你有一个链接，指向你正在尝试实现但不起作用的东西 - 所以我们可以看到你已经做了什么，看看我们是否能找出问题所在。跨度>

标签： html css media-queries

【解决方案1】：

!important 规则是一种让你的 CSS 层叠的方法，但它也有你认为最重要的规则始终被应用。无论该规则出现在 CSS 文档中的什么位置，都将始终应用具有 !important 属性的规则。因此，如果您想确保始终应用某个属性，您可以将 !important 属性添加到标记中。

所以删除 !important 来自媒体查询代码中的 .form-header 和 .gradiant。

编辑：替换

@media screen and(max-width: 768px)

与

@media(max-width: 768px)

【讨论】：

如果我删除我不能覆盖原生 css。

【解决方案2】：

我通过不包含 !important 获得了输出，我只是将我的原生 CSS 放在媒体查询之前，@Big Chris 早期提到..

【讨论】：

@bigChris 在哪里提到过。
起初...但现在已删除。