2

我正在为 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 ...
4

1 回答 1

4

第一个问题：

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

是的，我见过很多长的 responsive.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 解析效率。请参阅这篇文章进行确认。

于 2013-06-21T09:04:43.437 回答