モバイルデバイス上で表示する2つのdivを、私のプロジェクトでは、メディアクエリー

Question

を使用して、デスクトップ上の1を隠す私は2つのdiv要素（すなわち＃のDIV1、＃のDIV2）を持っています。両方の部門をモバイルデバイスに表示し、デスクトップデバイスの＃div1のみを表示します。

この場合

@media screen and (max-width: 600px) { 
     #div1 { 
      display: none; 
     } 
} 

、デスクトップなどの作業SHOW- ＃DIV1、DIV2＃と＃1 DIV2を示すモバイル。

しかし、私はデスクトップが＃のDIV1を表示する＃DIV1、およびモバイルを表示したいが、＃は、このために、@のメディアクエリを書くことができますどのように

をDIV2。理解できません。あなたはそれだけでメディアクエリのmax分間をスワップアウトしてい

Answer 1

/* mobile first */ 
 

 
.div1, .div2 { 
 
    padding: 20px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.div1 { 
 
    background-color: pink; 
 
} 
 

 
.div2 { 
 
    background-color: tan; 
 
} 
 

 

 
@media screen and (min-width: 600px) { 
 
    .div1{ 
 
    display: none; 
 
    } 
 
}

<div class="div1">DIV 1</div> 
 
<div class="div2">DIV 2</div>

。