iphone刘海屏页面适配方法

1. 下面是实现iphonex 刘海屏前端页面适配的一个插值算法小案例

  
  
  
    body, ul {
      margin: 0;
    }

    ul {
      padding-left: 10px;
    }

    li {
      list-style: none;
    }

    .phone {
      position: relative;
      width: 600px;
      height: 300px;
      border: 10px solid #000;
      border-radius: 30px;
      margin: 100px auto 0;
    }

    .content, .content ul {
      width: 100%;
      height: 100%;
    }

    .content {
      overflow-x: hidden;
      overflow-y: scroll;
    }

    .camera {
      position: absolute;
      top: 60px;
      left: 0;
      width: 26px;
      height: 180px;
      background-color: black;
      border-radius: 0 30px 30px 0;
    }

    li + li {
      border-top: 1px solid #ccc;
    }

    li {
      font-size: 16px;
      padding: 5px;
    }

    *::-webkit-scrollbar {
      padding-left: 100px;
    }
  



  
    

      
SweeTango
      
Pacific Rose
      
SnapDragon
      
Envy
      
Koru (Plumac)
      
Pink Lady (Cripps Pink)
      
HoneYcrisp
      
Hoyal Gala
      
Macoun
      
SweeTango
      
Pacific Rose
      
SnapDragon
      
Envy
      
Koru (Plumac)
      
Pink Lady (Cripps Pink)
      
HoneYcrisp
      
Hoyal Gala
      
Macoun
      
Macoun
      
SweeTango
      
Pacific Rose
      
SnapDragon
      
Envy
      
Koru (Plumac)
      
Pink Lady (Cripps Pink)
      
HoneYcrisp
      
Hoyal Gala
      
Macoun
      
    
  

以上所述是小编给大家介绍的iphone刘海屏页面适配方法详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！