css媒体查询适配备忘

// iphone X, iphone Xs
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {...}
// iphone Xs max
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {...}
// iphone XR
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {...}
// iphone 4, iphone 4s
@media (device-height: 480px) and (-webkit-device-pixel-ratio: 2) {...}
// iphone 5, iphone 5s
@media (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {...}
// iphone 6, iphone 7, iphone 8s
@media (device-height: 667px) and (-webkit-device-pixel-ratio: 2) {...}
// iphone 6 Plus, iphone 7 Plus, iphone 8 Plus
@media (device-height: 736px) and (-webkit-device-pixel-ratio: 2) {...}
// 横屏
@media all and (oriendation: landscape) {...}
// 竖屏  
@media all and (orientation: portrait) {...}