完全重置 @media 屏幕内的 CSS 类答案

【问题标题】：Completely reset a css class inside @media screen完全重置 @media 屏幕内的 CSS 类
【发布时间】：2015-05-28 01:33:13
【问题描述】：

我有一个用于主站点的菜单栏，其中包含很多 CSS，但对于智能手机用户，我想完全重新设计菜单栏。我通过使用@media only screen and (max-width: 767px) {} 并更改那里的类的属性来做到这一点，但是所有内容都是从原始类继承的，手动重置每个类的每个属性真的很痛苦。

所以我想知道在使用 @media only screen and (max-width: 767px) {} 时是否有一种简单的方法可以在 CSS 中重置类

【问题讨论】：

你使用的是什么框架？
带有 Genesis 框架的 WordPress。最后我不得不手动完成。是一次大规模的试错。大多数属性我重置为auto。

标签： css reset

【解决方案1】：

有一个名为 all 的属性用于重置所有 CSS 属性。

.classname {
    all: initial; /* or unset */
}

initial - 此关键字表示将应用于元素或元素父级的所有属性更改为其初始值...

unset - 此关键字表示将应用于元素或元素父级的所有属性更改为其父级值（如果它们是可继承的，则更改为初始值）...

浏览器支持：Chrome 37+、Firefox 27+、IE 11+、Safari 不支持

【讨论】：

谢谢。正是我想要的，不幸的是，由于对浏览器的支持如此之低，尤其是 IE，最后我不得不手动完成。这是一个巨大的痛苦，我仍然没有 100% 完成重置。希望在 2-3 年内可以将其用作标准。
我宁愿创建第二个导航，而不是重置每个属性，而是在两个导航中包含相同的内容，并在@media 查询中隐藏主导航。
@Chris。对我来说听起来不错，我有时也会这样做，但它也取决于 CMS，如果 OP 使用任何允许这样做的话。如果您愿意，请随时将其发布为答案。