移动端媒体查询适配

前言

最近在做移动端项目嘛，免不了会有不同尺寸大小的手机端适配，所以总结一下媒体查询。

直接代码啊

@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%;
}

参考链接: https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries