Question

我不完全确定发布声明的最佳方式，例如

@media screen and (max-width: 600px) {
     //
}

在我的样式表中。例如，如果我有一个与某个元素相关的规则块（比如边栏）并且我想要包含一些响应规则，那么很容易将上面的代码与侧边栏的所有其他规则一起插入。但是当屏幕宽度低于600px时，我可能还有一些其他元素（比如标题）也需要以某种方式改变。然后我最终会在我的CSS文件中上下散布几个@media screen and (max-width: 600px)声明。但是对我来说更有意义 - 根据他们控制的HTML元素优先组合CSS规则。

我可以这样做吗？

是否会对性能产生负面影响

@media screen and (max-width: 600px) {
    .sidebar {
        font-size: 12px;
    }
}

@media screen and (max-width: 600px) {
    .header {
        font-size: 16px;
    }
}

而不是

@media screen and (max-width: 600px) {
    .sidebar {
        font-size: 12px;
    }
    .header {
        font-size: 16px;
    }
}

Answer 1

使用多个媒体查询而不是仅使用一个媒体查询，没有明显的性能损失。但是，如果您调整大小或放大/缩小浏览器，可能会出现内存峰值和CPU负载。您不会调整浏览器的大小，但有目标的用户需要缩放您的网站等。

您应该考虑使用像Less，SASS或Stylus这样的CSS预处理器。媒体查询可以作为规则中的CSS属性放置：

// app.less

@max-width: 600px;

.sidebar {
    background: #2c2c2c;
    @media screen and (max-width: @max-width) {
        font-size: 12px;
    }
}

如果您无法使用CSS预处理器，请不要因维护噩梦而复制媒体查询。

Answer 2

我认为这只会增加你的css文件大小，但如果你缩小它，你应该没问题。尽管尽可能少地编写尽可能多的代码，但这是最好的做法。

多个响应声明的性能影响

2 个答案: