css 媒体查询，一个或多个用于移动优化

Question

我知道以移动优先的方式使用媒体查询应该可以让网站在移动设备上运行得更快。我想知道使用大量媒体查询是否有区别，如下所示:

#first {}

@media screen and (min-width: 37.5em) {
    #first {}
}

#second {}

@media screen and (min-width: 37.5em) {
    #second {}
}

而不是像这样对所有桌面样式使用一个大的样式:

#first {}

#second {}

@media screen and (min-width: 37.5em) {
    #first {}

    #second {}
}

哪个更好，对于性能还是重要？我认为第一种方法在处理大量样式时更容易阅读。

Answer 1

他们都做同样的事情，唯一使第二种方法更好的是你没有重复自己。您保持代码干燥，所有内容都位于一个位置以处理该媒体查询。再加上每次都重写@media 屏幕会很麻烦而且很耗时。