很多媒体查询跨文件确定 [英] Are lots of media queries spread across files ok

问题描述

我使用stylus for css，我喜欢尝试并包含较小的更多可管理的片段/样式模块跨多个文件/ dirs。

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

例如

$ b b

  // a.sty 
 
 #a ... 
 
 @media只有屏幕和（最小宽度：480像素）
 
 #a ... 
 
 
 @media只有屏幕和（min-width：900px）
 
 #a .. 。
  

...

  // b.sty 
 
 #b ... 
 
 @media only screen and（min-width：480px）
 
 #b ... 
 
 
 @media只有屏幕和（min-width：900px）
 
 #b ... 
  

解决方案

第一个问题：

< blockquote>

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

是的，我看到了很多long的responsive.styl文件，他们不漂亮。最好将媒体查询分成它们所属的文件。

一句话要谨慎。将您的媒体查询值保存在一个文件中（例如 variables.styl ），或者稍后您想要更改它们时，您将很快后悔。

要在Stylus中实现这一点，请执行以下操作：

在 variables.styl p>

  smartphoneWidth = 748px 
 tabletWidth = 1012px 
 
 mqSmartphone =only screen and（max-width ：+ smartphoneWidth +）
 mqTablet =只有屏幕和（max-width：+ tabletWidth +）
  

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

  @media mqSmartphone 
 //样式到这里
 
 @media mqTablet 
 //样式到这里
  

$ b b

第二个问题：

这会导致任何种类的性能问题（除了我的css文件由于多个查询语句）？

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

I'm using stylus for css and I like to try and contain smaller more manageable snippets/modules of styles across lots of files/dirs.

Is it ok to have media queries in each of these files, so the query is only relevant to the styles in the same styl/css file? Would this cause any sort of performance issues (other than my css file being larger due to multiple query statements)?

eg

//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 ...

解决方案

First question:

Is it ok to have media queries in each of these files, so the query is only relevant to the styles in the same styl/css file?

Yes, I have seen a lot of long responsive.styl files, and they are not pretty. It is best to separate media queries into the files they belong in.

One word of caution. Keep your media query values in one file (e.g. variables.styl) or you will soon regret it when you want to change them later.

To implement this in Stylus I do the following:

In variables.styl

    smartphoneWidth = 748px
    tabletWidth     = 1012px

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

Now in your other stylus files you can use:

    @media mqSmartphone
        // Styles go here

    @media mqTablet
        // Styles go here

Second question:

Would this cause any sort of performance issues (other than my css file being larger due to multiple query statements)?

The multiple queries shouldn't affect the css parsing efficiency by any noticeable amount. See this article for confirmation.

这篇关于很多媒体查询跨文件确定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！