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;
   }
  }

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

1 个答案: