Question

所以我目前正在构建一个允许将CSS存储在MariaDB（MySQL）数据库中的系统。我目前正在讨论这个逻辑流程，并想知道什么是媒体查询的首选。

所以，我真正想知道的是;

我应该在CSS文件的顶部加载媒体查询还是在CSS文件顶部加载非媒体查询选择器？哪个更好？或者这是主观的，因为事情被页面下方的代码覆盖了。

先谢谢大家。

Answer 1

实际上这可能是主观的，但是，有最好的做法。

我更喜欢将常规CSS选择器保存在app.scss这样的文件中，并在开发时将媒体查询保留在responsive.scss等其他文件中。所以即使将所有模块分开也会更好。但是，最后，您需要连接它们，最好的方法是先保留正常的CSS选择器，然后再加载Media-Query。

@import 'custom/app';
@import 'custom/responsive';

遵循这种做法的原因是CSS将从TOP读到BOTTOM，因此，您可能会理解所有媒体查询规则将在其原始规则之后隐含，并且不会影响响应性。

总而言之，这可能是非常有主题的，并且其他开发人员可能更愿意在彼此之后编写CSS和媒体查询CSS规则，但很明显，他们最有可能在主要规则之后立即编码媒体查询。为了澄清，我将在我的观点中只编写一个示例代码：

不可

body { background-color: lightblue; } @media only screen and (orientation: landscape) { body { background-color: lightblue; } }

<强> BAD

@media only screen and (orientation: landscape) { body { background-color: lightblue; } } body { background-color: lightblue; }

更新：

我还想提到两种不同的方法。

移动优先

您的小屏幕样式位于常规屏幕CSS中，然后随着屏幕变大，您可以覆盖所需的内容。

body { background: lightblue; } @media (min-width: 480px) { body { background: lightblue; } }

桌面优先

您的大屏幕样式位于常规屏幕CSS中，然后随着屏幕变小，您可以覆盖所需的内容。

body { background: lightblue; } @media (max-width: 480px) { body { background: lightblue; } }

Answer 2

没关系。出于实际目的，我将媒体查询放在建模元素之后，但是您可以将所有查询放在页面的顶部或底部，这将是无关紧要的（它不会加载更快或更慢）。出于调试目的，我认为我的方法更好。

例如：

.box { max-width: auto; }

@media (min-width: 1200px) {
  .box {
    max-width: 10px;
  }
}

CSS优先顺序

2 个答案: