Responsive design Common Media queries

(PS: The original written in 2012, the text of the reference to the appropriate changes, please point out the improper)

Now that the web is moving toward a responsive trend, media queries play a major role in creating responsive web sites.

No media queries can be implemented in a responsive design, and media queries allow us to write CSS for specific devices such as monitors, smartphones and tablets.

Media query is the core of responsive design

In this article I will share some of the frequently used media queries I have collected so far. In some examples, I might be wrong, but don't worry, because I've opened a comment feature for this. I divide them into display media queries, smart phone media queries, and tablet media queries

Monitor Media Query

Display media queries are based on screen size

640px

and (max-width640px) { }

800px

and (max-width800px) { }

1024px

and (max-width1024px) { }

Smart Phone Media Query

Suitable for most mainstream smartphones

IPhone (2g-4s)

/*Landscape Mode*/and (max-device-width480px) { }/* Portrait Mode */and (max-device-width320px) { }

IPhone 4

and (-webkit-min-device-pixel-ratio1.5and (min-device-pixel-ratio1.5) { }

IPhone5

and (min-device-width320and (max-device-width568px) {   /* 样式写在这里 */}

IPhone6

@media only Screens and(min-device-width:375px and(Max-device-width:667px and(orientation:portrait) {/*iphone 6 portrait*/} @media only Screens and(min-device-width:375px and(Max-device-width:667px and(Orientation:landscape) {/*iphone 6 landscape*/} @media only Screens and(min-device-width:414px and(Max-device-width:736px and(orientation:portrait) {/*iphone 6+ portrait*/} @media only Screens and(min-device-width:414px and(Max-device-width:736px and(Orientation:landscape) {/*iphone 6+ landscape*/} @media only Screens and(Max-device-width:640PX), only screen and(Max-device-width:667PX), only screen and(Max-width:480PX) {/*iphone 6 and IPhone 6+ portrait and landscape*/} @media only Screens and(Max-device-width:640PX), only screen and(Max-device-width:667PX), only screen and(Max-width:480px and(orientation:portrait) {/*iphone 6 and IPhone 6+ portrait*/} @media only Screens and(Max-device-width:640PX), only screen and(Max-device-width:667PX), only screen and(Max-width:480px and(Orientation:landscape) {/*iphone 6 and IPhone 6+ landscape*/}

HTC Evo,blackberry TORCH,HTC THUNDERBOLT,HD2

and (max-device-width480px) { }

Tablet media Query

This list will be a bit long

Ipad

/* Landscape Mode */@media (max-device-width1024and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width768and (orientation: portrait) { }

IPad 2

/* Landscape Mode */@media (max-device-width1024and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width768and (orientation: portrait) { }

IPad 3

/* Landscape Mode */@media (max-device-width1024and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width768and (orientation: portrait) { }

IPad Mini

and (min-device-width768and (max-device-width1024px)and (-webkit-min-device-pixel-ratio1)  {   /* 样式写在这里 */}

Samsung Galaxy Tab 10.1

/* Landscape Mode */@media (max-device-width1280and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width800and (orientation: portrait) { }

Motorola Xoom

/* Landscape Mode */@media (max-device-width1280and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width800and (orientation: portrait) { }

HTC Flyer

/* Landscape Mode */@media (max-device-width1024and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width600and (orientation: portrait) { }

BlackBerry PlayBook

/* Landscape Mode */@media (max-device-width1024and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width600and (orientation: portrait) { }

HP TouchPad

/* Landscape Mode */@media (max-device-width1024and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width768and (orientation: portrait) { }

Lenovo Thinkpad Tablet

/* Landscape Mode */@media (max-device-width1280and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width800and (orientation: portrait) { }

Sony Tablet S

/* Landscape Mode */@media (max-device-width1280and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width800and (orientation: portrait) { }

T-mobile g-slate

/* Landscape Mode */@media (max-device-width1280and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width768and (orientation: portrait) { }

ViewSonic ViewPad 10

/* Landscape Mode */@media (max-device-width1024and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width600and (orientation: portrait) { }

Dell Streak 7

/* Landscape Mode */@media (max-device-width800and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width480and (orientation: portrait) { }

ASUS Eee Pad Transformer

/* Landscape Mode */@media (max-device-width1080and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width800and (orientation: portrait) { }

English Original: Some Media Queries for Responsive Design

Source: http://www.ido321.com/1540.html

Reference article:
Seven highly effective media query tips
Media Queries for ipads and iphones

Responsive design Common Media queries