Some size references for mobile media queries

Some size references for mobile media queries

/*iphone4 4s*/

@media only screen and (device-height:480px) and (-webkit-device-pixel-ratio:2) {

/* Styles */

}

@media screen and (min-width:320px) and (max-width:480px) {

/* Styles */

}

/*iphone5*/

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2) {

/* Styles */

}

/*iphone6*/

@media (min-device-width:375px) and (MAX-DEVICE-WIDTH:667PX) and (-webkit-min-device-pixel-ratio:2) {

/* Styles */

}

/*iphone6+*/

@media (min-device-width:414px) and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:3) {

/* Styles */

}

/* IPads (Portrait) */

@media only Screens

and (MIN-DEVICE-WIDTH:768PX)

and (MAX-DEVICE-WIDTH:1024PX)

and (orientation:portrait) {

/* Styles */

}

/* IPads (Landscape) */

@media only Screens

and (MIN-DEVICE-WIDTH:768PX)

and (MAX-DEVICE-WIDTH:1024PX)

and (Orientation:landscape) {

/* Styles */

}

/* IPads (Portrait and Landscape) */

@media only Screens

and (MIN-DEVICE-WIDTH:768PX)

and (max-device-width:1024px) {

/* Styles */

}

/* Meizu */

@media only screen and (min-device-width:1080px) and (-webkit-min-device-pixel-ratio:2.5) {

/* Styles */

}

/*mate7*/

@media only screen and (min-device-width:1080px) and (-webkit-min-device-pixel-ratio:3) {

/* Styles */

}

/* Width 1024 or less on the tablet */

@media only screen and (min-width:321px) and (max-width:1024px) {

/* Styles */

}

/* PC client or large screen device: 1028px to Greater */

@media only screen and (MIN-WIDTH:1029PX) {

/* Styles */

}

/* Vertical Screen */

@media screen and (orientation:portrait) and (max-width:720px) {

/* Styles */

}

/* Horizontal Screen */

@media screen and (Orientation:landscape) and (min-width:480px) {

/* Styles */

}

Regular size detailed adaptation

@media screen and (min-width:320px) {}

@media screen and (min-width:360px) {}

@media screen and (min-width:375px) {}

@media screen and (min-width:400px) {}

@media screen and (min-width:414px) {}

@media screen and (min-width:440px) {}

@media screen and (min-width:480px) {}

@media screen and (min-width:520px) {}

@media screen and (min-width:560px) {}

@media screen and (min-width:600px) {}

@media screen and (min-width:640px) {}

@media screen and (min-width:680px) {}

@media screen and (min-width:720px) {}

@media screen and (min-width:760px) {}

@media screen and (min-width:800px) {}

@media screen and (min-width:960px) {}

Precautions:

Width refers to the breadth of the viewable area, and when the page scale is set to 0.5, its value is magnified by one-fold.

Device-width is the actual width of the device and does not change as the screen rotates, so it is not suitable for developing responsive web sites.

For example, iphone5s screen resolution width is 640, due to the Retina display policy, when the scale is set to 1, the corresponding media to take the width of 320, when the scale is set to 0.5, width is 640, and Device-widt H is always 320.

Summarize

1.device-width is only relevant to the resolution of the device, usually the resolution/device pixel ratio, and does not change its value as the phone rotates

2.width is related to the scale property of the viewport, and is the width of the viewable area of the page

Some size references for mobile media queries