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/

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

Answer 2

按查询分组是恕我直言，这是实施媒体查询的最清晰的方式。特别是如果你处于“正常”的css（我的意思是：你不使用预处理器作为Sass或更少）。

如果按组件分组，则很简单：如果需要更改断点值，该怎么办？您需要更改所设置的所有查询中的所有值。

顺便说一句，按组件进行查询会产生更多代码。

将所有查询放在CSS文件的末尾（如果可以在生产中连接它，则放在单独的文件中）。

Answer 3

要么在样式表的末尾使用媒体查询，要么为媒体查询创建单独的css文件。

css中媒体查询的最佳位置

3 个答案: