メディアクエリーの正しい使い方

Question

メディアクエリーの正しい使い方を実演できますか？私は非常に多くの応答性の高いコードを持っています。私は2番目のメディアクエリがそれが理にかなっている場合、前のものの属性も継承することを望みますか？つまり、最小幅201pxの場合、pはfont-size 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;} 

私はちょうどP行うことができ、メディアクエリ3におけるように、それを持ってしたい{テキスト整列：センター;}残りの継承。

@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のルールを削除してください。