html - 正确使用媒体查询

Question

有人可以演示媒体查询的正确用法吗？我有很多响应代码 - 即下面的简化版本。我希望第二个媒体查询也能继承前一个媒体查询的属性，如果这有意义的话？即当最小宽度为 201px 时，p 应具有 30px 的字体大小和 text-align center。目前我不得不复制代码，在这种情况下这很好，但是对于一个大的代码库来说，这是非常可怕的，而且有 99% 的冗余。即

media query 1 - p{font-color:blue;}
media query 2 - p{font-color:blue; font-size:5px;}
media query 3 - p{font-color:blue; font-size:5px; text-align center;}

我想要它，所以在媒体查询 3 中我可以只做 p{text-align: center;} 其余的继承。

   @media query screen and (min-width:100px) and (max-width:200px)
    {
       p{font-size:30px;}
    }

  @media query screen and (min-width:201px) and (max-width:300px)
{
   p{text-align:center;}
}    

Answer 1

如果您希望应用早期媒体查询的规则，请编写它们，以便它们不会明确排除后来的媒体查询。

即删除 max-width 规则。