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

Question

我的代码如下:
有一个 HTML 有两个 View ，一个 ListView 和一个卡片 View ，用户可以选择他/她喜欢的任何一个。当用户单击卡片 View 时，我将类卡片 View 添加到父元素，并为该选择器触发 css，例如 list view 将是 .order{} 卡片 View 将是 .card_view .order{} 现在我想在移动时(使用媒体查询)它应该只应用卡片 View 。

如果有人可以提供帮助，我将不胜感激，在此先感谢。

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

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