我对媒体查询提出了一个有趣的问题。
示例如下:
.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;
}
}
预期:
因此媒体查询会在1024到1360之间的屏幕上运行并覆盖填充和边距底部规则
之后,对于超过1660像素的大屏幕,将应用边距底部规则,但填充底部仍然来自之前的媒体查询,但不是来自默认卡类css规则
如何确保"填充:25px"规则适用于除第一个媒体查询之外的所有屏幕。