有更好的多媒体查询或单个媒体查询

我正在使用引导程序，并且我想（如果适用）每个屏幕大小都有特定的CSS。我想知道是否最好针对每个屏幕尺寸在我自己的CSS表格中查询每个屏幕尺寸，或者如果我需要在每个需要的位置进行媒体查询。有更好的多媒体查询或单个媒体查询

所以我们可以说我有这对我的标准屏幕尺寸：

.example-class{ 
    padding: 10px; 
}

然后换手机屏幕，我想这一点：

@media(max-width: 480px){ 
    .example-class{ 
     padding: 5px; 
    } 
}

我应该有在手机屏幕1个媒体查询它是我的CSS中的所有移动屏幕样式将会去的部分，或者我应该在每次需要为移动屏幕定制样式时进行媒体查询。

从我所知道的，有多个媒体查询不一定会影响性能。添加很多会增加CSS文件的大小，这会影响性能。

此外，我想确保我的CSS容易被别人理解。我认为在每个实例中都需要媒体查询可能会更容易，这样一个特定元素的CSS全部在一个位置。

来源

2017-03-15 Dylan Caudill

使用像SASS或Less这样的CSS预编译器，所有这些都将消失，您不必担心它。 – DavidG

对于我了解双方的Webkit和壁虎引擎序列化媒体查询（我认为它实际上是一个W3C推荐），所以他们只需要一次评估媒体查询。

我会说，如果性能是一个问题给你，加载每个案件的具体文件，清除他们的混乱。这样，您最终会得到几个较小的文件，并只在需要时加载所需的文件。

如果性能不是问题，我个人认为CSS文件大小不会增加太多以影响您的网站性能。请记住，调整网页的大小并不常见，除非您正在测试内容。

作为一名前端开发人员，如果您的元素CSS全部在一起，而不必通过文件的几个部分或多个文件来更新，那么维护CSS会容易得多。

因此，我建议有：

.example-class{ 
    padding: 10px; 
} 

@media(max-width: 480px){ 
    .example-class{ 
     padding: 5px; 
    } 
}

希望这有助于。

来源

2017-03-15 15:49:06

为各种屏幕尺寸编写通用媒体查询间隔，而不是在必要时编写媒体查询，这使代码更易于管理和扩展。

@media screen and (min-width: 320px) and (max-width: 767px) { 
    /*Mobile Device Screens*/ 
} 

@media screen and (min-width: 991px) { 
    /*Large Screens*/ 
}

为了使代码更易读我们可以基于不同的页面以及它们各自内容划分在每个间隔中的代码段和子区段。

@media screen and (min-width: 320px) and (max-width: 767px) { 
    /*Mobile Device Screens*/ 
    /*Homepage*/ 
    . 
    . 
    . 
    /*About*/ 
    . 
    . 
    . 
} 

@media screen and (min-width: 991px) { 
    /*Large Screens*/ 
    /*Homepage*/ 
    . 
    . 
    . 
    /*About*/ 
    . 
    . 
    . 
}

来源

2017-03-15 15:46:52

有更好的多媒体查询或单个媒体查询

回答

相关问题