最好是仅对移动设备和桌面或媒体查询使用媒体查询而不进行任何定义？

Question

为了获得更好的性能,最好是这样:

#A {
 background: #000;
 border-radius: 10px;
}

@media (min-width: 1025px) {
#A{ 
  margin: 10px;
 }
}

@media (max-width: 1024px) {
 #A {
  margin: 200px;
 }
}

或这个:

@media (min-width: 1025px) {
#A{ 
  background: #000;
  border-radius: 10px;
  margin: 10px;
 }
}

@media (max-width: 1024px) {
 #A {
  background: #000;
  border-radius: 10px;
  margin: 200px;
 }
}

我想了解是否更好地拥有"通用" CSS(不在媒体查询中),而不是根据屏幕大小在媒体查询中只有CSS.

对不起,我的英文(和标题)...非常感谢!:)

Answer 1

第一种选择会更好.您只是更改跨媒体查询更改的属性,而不是重置所有属性.

样式的重复是代码气味,并且可能导致较大规模的不可维护的CSS.

您可以进一步优化并将其中一个边距设置为默认值,然后在命中断点时覆盖.

 #A {
   background: #000;
   border-radius: 10px;
   margin: 10px;
  }

  @media (max-width: 1024px) {
   #A {
    margin: 200px;
   }
  }