為了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>
