css媒体查询来兼容

1,判断ipad:

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

2,判断ipad横屏:

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

and(orientation : landscape){
  样式
}

3,判断ipad竖屏:

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

and(orientation : portrait){
  样式
}

4,判断i苹果5:(判断横屏竖屏和ipad方法一样)

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px){

  样式
}

5,判断i苹果6:(判断横屏竖屏和ipad方法一样)

@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px){

  样式
}

判断其他型号类似:就是把手机的分辨率宽高/2


猜你喜欢

转载自blog.csdn.net/wangle_style/article/details/79818649
今日推荐