Question

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

*由于此处有三列，因此请为每第3行禁用右边距*

.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）定义，或者是否有更简单，更好的解决方案？

Answer 1

点亮你的

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

在桌面媒体查询中，移动设备无需了解任何相关信息。

CSS定义 - 需要覆盖？

1 个答案: