通过媒体查询触发适用于不同选择器的样式

Question

我的代码如下：
 有一个HTML有两个视图，列表视图和卡片视图，用户可以选择他/她喜欢的。当用户点击卡片视图时，我将类卡片视图添加到父元素，然后我触发该选择器的css，例如列表视图将.order{}卡片视图将为.card_view .order{}现在我想在移动设备（带媒体查询）时才应该使用卡片视图。

如果有人可以提供帮助我会很感激，请提前感谢。

Answer 1

.order,
.card_view {
    /* same properties for both CSS selectors - both will look the same */
    color: white;
    background-color: #ddd;
}    
@media( min-width: 480px ) {
    .order {
       /* override styles for larger screens for this CSS selector - different looks */
       color: red;
    }
}

任何小于480px宽的视口都会对.order和.card_view使用相同的样式，因为它们具有相同的定义。在480px及以上，.order将使用媒体查询中重新定义的样式，它们现在具有不同的定义，并且样式将有所不同。