web 移动端媒体查询 适用各种情况

@media screen and (orientation: portrait) {
    /*竖屏 css*/
} 
@media screen and (orientation: landscape) {
    /*横屏 css*/
}
@media screen and (min-width:1366px){
    /*pc端 css*/
}
 
/*iphone 5/5s/5se */
@media screen and (max-width:569px){
    top: 7%;
    left: 18%;
}
/*iphone 6/7/8 */
@media screen and (min-width:569px) and (max-width:668px){
    top: 12%;
    left: 20%;
}
/*iphone 6p/7p/8p */
@media screen and (min-width:668px) and (max-width:737px){
    top: 14%;
    left: 20%;
}
/*iphone x */
@media screen and (min-width:737px) and (max-width:813px){
    top: 12%;
    left: 21%;
}
/*ipad*/
@media screen and (min-width:813px) and (max-width:1025px){
    top: 22%;
    left: 21%;
}
/*ipad pro*/
@media screen and (min-width:1024px){
    top: 25%;
    left: 21%;
}