@media属性针对苹果手机写法

最新推荐文章于 2024-08-12 15:57:18 发布

cc蒲公英

最新推荐文章于 2024-08-12 15:57:18 发布

阅读量2.2k

点赞数

分类专栏：移动端h5 文章标签： media

本文链接：https://blog.csdn.net/cddcj/article/details/52472538

版权

移动端h5 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

通过 CSS3 的 Media Queries 特性，可以写出兼容iPhone4/iPhone5/iphone 6/iphone6 plus的代码:

 
      @media (device- 
      height 
      : 
      480px 
      ) and (-webkit-min-device-pixel-ratio: 
      2 
      ){ 
     
      .class{} 
      /* 兼容iphone4/4s */ 
     
      } 
     
      @media (device- 
      height 
      : 
      568px 
      ) and (-webkit-min-device-pixel-ratio: 
      2 
      ){ 
     
      .class{} 
      /* 兼容iphone5 */ 
     
      } 
     
      @media (device- 
      width 
      : 
      375px 
      ) and (-webkit-min-device-pixel-ratio: 
      2 
      ){ 
     
      .class{} 
      /* 兼容iphone 6 */ 
     
      } 
     
      @media (device- 
      width 
      : 
      414px 
      ) and (-webkit-min-device-pixel-ratio: 
      3.0 
      ){ 
     
      .class{} 
      /* 兼容iphone6 plus */ 
     
      }