CSS 定义 - 需要覆盖？答案

【问题标题】：CSS definitions - overwriting needed?CSS 定义 - 需要覆盖？
【发布时间】：2016-01-19 19:46:51
【问题描述】：

基本上，我必须对不同屏幕尺寸的行的最后一列应用不同的边距（margin-right）。到目前为止，flexbox 运行良好。以下代码可以完成这项工作：

* 因为我们这里有三列，所以每第三行禁用右边距*

.div1:nth-child(3n) {  
    margin-right: 0%;
}

@include media-query($desktop) {

/*** As we have two columns here, undo no-margin for every 3rd row ***/

    .div1:nth-child(3n) {  
        margin: 0 5% 3.33% 0;
     }

/*** Instead, apply it to every second now ***/

    .div:nth-child(2n) {  
        margin-right: 0%;
     }

}

@include media-query($mobile) {

/*** As each column is 100% width now, only apply bottom-margin. ***/   

     .div1:nth-child(3n) {  
         margin: 0 0% 5% 0;
     }

     .div1:nth-child(2n) {  
         margin: 0 0% 5% 0;
     }

}

问题：我真的必须覆盖最后两个媒体查询的全局 .div1:nth-child(3n) 和 .div:nth-child(2n) 定义吗？更简单、更好的解决方案？

【问题讨论】：

标签： css media-queries responsiveness

【解决方案1】：

把你的

.div1:nth-child(3n) {  
  margin-right: 0%;
}

在桌面媒体查询中，移动设备不需要知道任何相关信息。

【讨论】：