[CSS]@media Rule

  • 3241
  • 0
  • CSS
  • 2017-08-15

為了RWD效果滿常使用到的CSS3寫法,

簡單定義3種大小裝置與使用情境範例:

1.只有PC要顯示時 pc-only

2.只有Pad要顯示時 pad-only

3.只有Mobile要顯示時mobile-only

4.只有pc和pad大小要顯示時 pad-pc-only

5.只有mobile和pad大小要顯示時 pad-mobile-only

CSS:

@media (max-width:767px){
  .pad-pc-only {
    display:none;
  }
  .pc-only {
    display:none;
  }
  .pad-only {
    display:none;
  }
}

@media (min-width:768px) and (max-width:1024px) {
  .mobile-only{
    display:none;
  }
  .pc-only {
    display:none;
  }
}

@media (min-width:1024px){
  .mobile-only{
    display:none;
  }
  .pad-only {
    display:none;
  }
  .pad-mobile-only {
    display:none;
  }
}

HTML:

<body>
  <label class="pc-only">PC</label>  
  <label class="mobile-only">MOBILE</label>  
  <label class="pad-only">PAD</label>  
  <br/>
  <label class="pad-pc-only">PC/PAD</label>  
  <label class="pad-mobile-only">PAD/MOBILE</label>  
</body>