是否有大量媒体查询在文件中传播

Question

我正在使用stylus for css，我喜欢尝试在更多文件/目录中包含更小的更易于管理的样式片段/模块。

在每个文件中都有媒体查询是否可以，因此查询只与同一个styl / css文件中的样式相关？这是否会导致任何类型的性能问题（除了我的css文件由于多个查询语句而变大）？

例如

//a.sty

#a ...

@media only screen and (min-width: 480px)

  #a ...


@media only screen and (min-width: 900px)

  #a ...

...

//b.sty

#b ...

@media only screen and (min-width: 480px)

  #b ...


@media only screen and (min-width: 900px)

  #b ...

Answer 1

第一个问题：

  

是否可以在每个文件中进行媒体查询，因此查询只与同一个styl / css文件中的样式相关？

是的，我看过很多很长的response.styl文件，而且它们并不漂亮。最好将媒体查询分成它们所属的文件。

提醒一句。将您的媒体查询值保存在一个文件中（例如variables.styl），或者您希望稍后更改它们时很快就会后悔。

要在Stylus中实现此功能，请执行以下操作：

在variables.styl

    smartphoneWidth = 748px
    tabletWidth     = 1012px

    mqSmartphone = "only screen and (max-width: " + smartphoneWidth + ")"
    mqTablet     = "only screen and (max-width: " + tabletWidth     + ")"

现在，您可以使用其他手写笔文件：

    @media mqSmartphone
        // Styles go here

    @media mqTablet
        // Styles go here

第二个问题：

  

这是否会导致任何类型的性能问题（除了我的css文件因多个查询语句而变大）？

多个查询不应以任何明显的数量影响css解析效率。 请参阅this article进行确认。