Question

原创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 。

Answer 1

！important规则是一种制作CSS级联的方法，但也包含您认为最重要的规则。无论CSS规则中出现哪个规则，都将始终应用具有！important属性的规则。因此，如果您想确保始终应用属性，则应将！important属性添加到标记中。

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

编辑：替换

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

与

@media(max-width: 768px)

Answer 2

我得到的输出不包括！重要的是，我只是在媒体查询之前放置我的原生CSS，早期由@Big Chris提及..

如何修复一些css样式不适用于@media屏幕和（max-width：768px）？

2 个答案: