媒体查询相关

移动端媒体查询尺寸参考

/*iphone4*/

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

}

/*iphone4s*/

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

}

/*iphone5*/

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

} 

/*iphone6*/

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){

}

/*iphone6+*/

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

}

/* iPads (portrait)  */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

}

/* iPads (landscape)  */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

}

/* iPads (portrait and landscape) */

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

}

/*魅族*/

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

 }

/*mate7*/

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

 }

/* 平板之类的宽度 1024 以下设备 */

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

}

/* PC客户端或大屏幕设备: 1028px 至更大 */

@media only screen and (min-width: 1029px) {

}

/* 竖屏 */

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

}

/* 横屏 */

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

}

 

注：-webkit-min-device-pixel-ratio可在js代码中通过devicePixelRatio查询。