css - css 中媒体查询的最佳位置

Question

我想为我的 css 代码编写媒体查询，但我想知道如何编写最佳代码以获得更好的性能

我现在的代码(这只是一个例子，当我有很多代码时我会这样做)

.element1 {font-size : 20px}
@media only and screen ( max-width:700px)
{
      .element1 {font-size : 30px}
}

.element2 {font-size : 30px}
@media only and screen ( max-width:700px)
{
      .element2 {font-size : 40px}
}

不过我也见过这样的

.element1 {font-size : 20px}
.element2 {font-size : 30px}
    @media only and screen ( max-width:700px)
    {
          .element1 {font-size : 30px}
          .element2 {font-size : 40px}
    }

这些代码之间有什么区别吗？ 他们哪个更好？

Answer 1

这基本上归结为偏好。对性能的影响很小，这里是一些记录的统计信息的链接:http://aaronjensen.github.io/media_query_test/

归结为:按组件分组或按查询分组。