各種適配整理

/*手機端通用*/
@media (max-width: 767px) {
	/* style */
}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
/* style */
}


@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/*兼容iphone6，iphone7，iphone8s ：*/
/* style */
}
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/*兼容iphone6 Plus,iphone7 Plus,iphone8 Plus：*/
/* style */
}

@media only screen and (device-width: 375px)
and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){/*兼容iphoneX*/
/* style */
}
/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
  /* style */
}

/* Portrait */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
  /* style */
}

/* Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
/* style */
}

/**ipad**/
@media only screen
and (min-device-width  : 768px)
and (max-device-width  : 1024px){
  /* style */
}

2，判斷ipad橫屏：

@media only screen
and (min-device-width  : 768px)
and (max-device-width  : 1024px)

and(orientation : landscape){
  /* style */
}

3，判斷ipad豎屏：

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)

and(orientation : portrait){
  /* style */
}