@media only screen and (min-device- 375px) and (max-device- 667px) and (orientation : portrait) {
/*iPhone 6 Portrait*/
}
@media only screen and (min-device- 375px) and (max-device- 667px) and (orientation : landscape) {
/*iPhone 6 landscape*/
}
@media only screen and (min-device- 414px) and (max-device- 736px) and (orientation : portrait) {
/*iPhone 6+ Portrait*/
}
@media only screen and (min-device- 414px) and (max-device- 736px) and (orientation : landscape) {
/*iPhone 6+ landscape*/
}
@media only screen and (max-device- 640px), only screen and (max-device- 667px), only screen and (max- 480px){
/*iPhone 6 and iPhone 6+ portrait and landscape*/
}
@media only screen and (max-device- 640px), only screen and (max-device- 667px), only screen and (max- 480px) and (orientation : portrait){
/*iPhone 6 and iPhone 6+ portrait*/
}
@media only screen and (max-device- 640px), only screen and (max-device- 667px), only screen and (max- 480px) and (orientation : landscape){
/*iPhone 6 and iPhone 6+ landscape*/
使用css3媒体查询,通常我们需要的宽度并不是这个手机的宽度,而是它的实际CSS宽度。