//全部的使用者都會載入這裡的 CSS。

@media screen and (min-width: 1200px) and (orientation: portrait){
    // 如果使用者之視窗寬度 >= 1200px，將會再載入這裡的 CSS。
}

@media screen and (min-width: 768px) and (max-width: 979px) and (orientation: landscape){
    // 如果使用者之視窗寬度介於 768px ~ 979px，將會再載入這裡的 CSS。    
}

@media screen and (max-width: 767px) {
    // 如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS。    
}

@media screen and (max-device-width: 480px) {
    // 如果使用者之裝置寬度 <= 480px，將會再載入這裡的 CSS。 
}

@media screen and (max-device-width: 480px), (max-device-width: 680px) and (orientation: landscape) {
    // 裝置寬度小於480 或 寬度小於680且橫向時 套用以下CSS
}

//在769和991之間才會trigger
@media (min-width: 769px) and (max-width: 991px) {
	hr.tablet{
		display: block;
	}
}

Reference:

1. http://fundesigner.net/css3-media-queries/
2. http://nmsdvid.com/snippets/#
3. http://mediaqueri.es/
4. Nice article:
   http://www.techbang.com/posts/3928-moving-a-label-is-working-on-mobile-version-of-website
5. Many examples:
   http://www.mrmu.com.tw/2011/04/06/css3-media-queries-liquid-layout/