Some practical CSS Media Query code snippets, personal collection,

Some practical CSS Media Query code snippets, personal collection,

The emergence of CSS3 simplifies responsive Web design,CSS3 provides powerful media queries, allowing you to set different styles for different conditions. You can provide different style effects for different devices without modifying the page content.

The following are some CSS media queries code snippets. You can add them to your project to adapt the page to the screen:

IPhone 5

Css code

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

Css code

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

Samsung S3

Css code

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

Google Nexus 7

Css code

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

Css code

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

IPad 3

Horizontal

Css code

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

Vertical

Css code

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

Galaxy Tab 10.1

Horizontal

Css code

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

Vertical

Css code

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