|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
//全部的使用者都會載入這裡的 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: