浏览文章
文章信息
【前端】CSS媒体查询适配基本所有设备屏幕
15157
适配代码
@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%; }