CSS3__1__媒体查询适配不同分辨率应用

270 阅读1分钟

<html>
<head> 
<meta charset="UTF-8"/>
<meta name="renderer"content="webkit"/>
<meta http-equiv="X-UA-Compatible"content="IE=EDGE, chrome=1">
<meta name="viewport"content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable"content="yes"/><meta name="apple-mobile-web-app-status-bar-style"content="black-translucent"/>
<meta name="msapplication-tap-highlight"content="no"/><meta name="format-detection"content="telephone=no"/>
<style>
 @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2)   
    /* 兼容iphone5,因为54的屏幕宽度一样 */    
 }
  @media only screen and (max-device-width :480px) {   }
  @media only screen and (min-device-width :481px) {    }    /*6*/   
  @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2) {    }    /*6+*/  
  @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3) {    }    /*魅族*/   
  @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5) {    }    /*mate7*/   
  @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3) {    }    /*4 4s*/   
  @media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2) {    } 
  @media screen and (min-width: 320px) and (max-width: 480px) {    }    /* 平板之类的宽度 1024 以下设备 */    
  @media only screen and (min-width: 321px) and (max-width: 1024px) {}    /* PC客户端或大屏幕设备: 1028px 至更大 */  
  @media only screen and (min-width: 1029px) {}    /* 竖屏 */  
  @media screen and (orientation:portrait) and (max-width: 720px) {    }    /* 横屏 */  
  @media screen and (orientation:landscape) {    }  
</style>
</head> 
<body></body>
</html>