CSS媒体查询适配范例

/*orientation:portrait纵向*/

/*orientation:landscape横向*/

/*iPhone 4*/

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

.m_game .ip_down{top:63%;}

.m_game .an_down{top:63%;}

}

/*iPhone 5*/

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

.m_game .ip_down{top:51%;}

.m_game .an_down{top:51%;}

}

/*iPhone 6*/

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

.m_game .ip_down{top:49%;}

.m_game .an_down{top:49%;}

}

/*iPhone 6 Plus*/

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

.m_game .ip_down{top:48%;}

.m_game .an_down{top:48%;}

}