为特定媒体查询应用css规则,并考虑所有其他媒体查询的剩余规则

时间:2018-06-07 14:35:02

标签: css css3 media-queries

我对媒体查询提出了一个有趣的问题。

示例如下:

.card {
 padding: 25px;
 margin-bottom: 15px;
 width: 300px;
 border: 1px solid red;
    **--- 1st media query**
   @media only screen and (min-width: 1024px) and (max-width: 
        1360px) and (max-height: 768px) { 
          padding: 10px;
          margin-bottom: 15px;
   }
   @media only screen and (min-width: 1660px) { 
     /* Here I am not going to mention the rule for padding - but 
       wanted */
        margin-bottom: 15px;
   }
}

预期:

  1. 因此媒体查询会在1024到1360之间的屏幕上运行并覆盖填充和边距底部规则

  2. 之后,对于超过1660像素的大屏幕,将应用边距底部规则,但填充底部仍然来自之前的媒体查询,但不是来自默认卡类c​​ss规则

  3. 如何确保"填充:25px"规则适用于除第一个媒体查询之外的所有屏幕。

0 个答案:

没有答案