html - 在媒体查询中重置 CSS

Question

假设我有一个媒体查询..

@media only screen and (min-width: 960px) {
 /*STYLE HERE */
}

是否可以在此媒体查询中重置 CSS，以便其中的任何元素都不会从默认样式表中接收样式？

帮助肯定会受到赞赏！

Answer 1

如果您想实现这样的目标，请使用查询加载样式表：

<link rel='stylesheet' media='screen and (max-width: 959x)' href='mobile.css' />
<link rel='stylesheet' media='screen and (min-width: 960px)' href='desktop.css' />

我不建议您使用两个具有重复样式/布局的不同样式表，因为在较大的项目中将变得非常难以管理。

相反，我建议使用移动优先的主样式表（或查询），在其中应用基本的移动布局、颜色和样式等。然后为其余的工作表/查询（平板电脑->桌面）编写布局。大多数情况下，查询将需要简单的列调整和一些填充/边距、字体大小等，因此您的大部分主要样式都会在任何地方使用。