一些實用的CSS Media Query代碼片段，個人採集

CSS3的出現讓響應式Web設計變得簡單，CSS3提供了強大的media queries，允許你針對不同的條件設置不同的樣式，可以在不修改頁面內容的情況下，為不同設備提供不同的樣式效果。

以下是一些CSS media queries代碼片段，你可以添加在自己的項目中，讓頁面根據屏幕自適應：

iPhone5

1. @media screen and (device-aspect-ratio: 40/71) {  
2. }  
3. or  
4. @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){  
5. }  

Blackberry Torch

1. @media screen and (max-device-width: 480px) {   
2. }  

Samsung S3

1. @media only screen and (-webkit-device-pixel-ratio: 2) {  
2. }  

Google Nexus 7

1. @media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {  
2. }  

iPad Mini

1. @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {  
2. }  

iPad 3

橫向

1. @media (max-device-width: 1024px) and (orientation: landscape) {   
2. }  

豎向

1. @media (max-device-width: 768px) and (orientation: portrait) {   
2. }  

Galaxy Tab 10.1

橫向

1. @media (max-device-width: 1280px) and (orientation: landscape) {   
2. }  

豎向

1. @media (max-device-width: 800px) and (orientation: portrait) {   
   
2. }