html - 默认@media 查询样式

Question

媒体查询的特殊性是什么？为什么删除封装最小屏幕宽度的媒体查询会覆盖小屏幕的媒体查询？

<style>
@media only screen and (max-width: 600px) {

  table,tr,td {
    width:100%; 
    margin:0 0 ;
/* background-color: #CCFF33 !important; */
  }

img {
        max-width: 100%;
        height: auto;
  }
}
@media only screen and (min-width: 600px) { 
  table,tr,td {  /* removing this encapsulation yields fix width for */
              margin:0 auto; /* all screens */
              width: 600px;
  }
}
</style>

Answer 1

What is the specificity on media queries?

媒体查询对特异性没有任何影响。

Why does removing the media query encapsulating minimum screen widths override the media query for small screens?

因为特异性是相同的——你的两个规则都使用简单的元素选择器——它归结为规则的顺序，后者获胜。