Question

我正在使用bootstrap，我想（如果适用）每个屏幕大小都有特定的CSS。我想知道在我自己的CSS表单中为每个屏幕大小设置1个媒体查询是否更好，或者我是否应该在需要的每个位置进行媒体查询。

所以我想说我的标准屏幕大小是这样的：

.example-class{
    padding: 10px;
}

然后对于移动屏幕，我想要这个：

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

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

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

此外，我想确保我的CSS易于被其他人理解。我认为在每个实例中都需要一个媒体查询可能更容易，因为特定元素的CSS都在一个地方。

Answer 1

据我所知，Webkit和Gecko引擎序列化媒体查询（我相信它实际上是W3C推荐），所以他们只需要评估媒体查询一次。

我会说，如果性能对您来说是一个问题，请为每个案例加载特定文件，从而清除它们的混乱。这样，您最终会得到几个较小的文件，只在需要时加载您需要的文件。

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

作为一名前端开发人员，如果你的元素CSS全部在一起，而不是必须经历文件的几个部分或几个文件来更新它，那么维护CSS要容易得多。

所以我建议：

public class ItemTemplateViewModel
{
    public int Id {get; set;}
    public string Name { get; set; }
}

希望这有帮助。

Answer 2

为一系列屏幕尺寸编写公共媒体查询间隔，而不是在必要时编写媒体查询，使代码更易于管理和扩展。

@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*/
   .
   .
   .
}

拥有多个媒体查询或单个媒体查询是否更好？

2 个答案: