Html 正确使用媒体查询

有人能演示一下媒体查询的正确用法吗？我有相当多的响应代码-即下面的简化版本。我希望第二个媒体查询也继承前一个媒体查询的属性，若这有意义的话？i、 当最小宽度为201px时，e.p的字体大小应为30px，文本居中对齐。目前，我必须复制代码，在本例中，这是很好的，但有一个大的代码库，这是非常可怕的和99%的冗余。i、 e

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

我希望在media Query3中使用它，这样我就可以对继承的其余部分执行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;}
}    

---

如果希望应用先前媒体查询中的规则，请编写这些规则，以便它们不会明确排除后面的查询

---

i、 e.删除

max width

规则。

如果要应用先前媒体查询中的规则，请编写这些规则，以便它们不会明确排除后面的查询

---

i、 e.取消

最大宽度

规则。

啊，有一个金色的瞬间-为快速响应干杯！将在13分钟内投票：）啊，有一个金发的时刻-为快速反应干杯！将在13分钟内投票：）