margin-bottom: constant(safe-area-inset-bottom); 

} 

空的色彩块：

{ 
  position: fixed; 
  bottom: 0; 
  width: 100%; 
  height: constant(safe-area-inset-bottom); 
  background-color: #fff; 
} 

像这种只是地位须要对应向上调剂，可以仅经由过程外边距 margin 来处理：

{ 
  margin-bottom: constant(safe-area-inset-bottom); 
} 

或者，你也可以经由过程计算函数 calc 覆盖本来 bottom 值：

{ 
  bottom: calc(50px(假设值) + constant(safe-area-inset-bottom)); 
} 

别忘了应用 @supports

写到这里，我们常见的两种类型的 fixed 元素适配筹划已经懂得了吧，但别忘了，一般我们只欲望 iPhoneX 才须要新增适配样式，我们可以合营 @supports 如许编写样式：

前面也有提到过，只有设置了 viewport-fit=cover，才能应用 constant 函数。

@supports (bottom: constant(safe-area-inset-bottom)) { 
  div { 
    margin-bottom: constant(safe-area-inset-bottom); 
  } 
} 

【编辑推荐】

1. iPhone X烧屏问题终于有解了 它能有效避免
2. 为了让iPhone X更好浏览网页，我给网页加了个导航按钮
3. 移动端适配iPhone X 周全屏指南
4. 新弄法！iPhone X运行Windows 95：流畅扫雷、单机游戏
5. 1万块买的iPhone X寿命是多久？苹不雅给出谜底

【义务编辑：未丽燕 TEL：（010）68476606】

　　推荐阅读

　　从Zero到Hero ，一文掌握Python

CTO练习营 | 12月3-5日，深圳，是时刻成为优良的技巧治理者了 第一个问题，什么是 Python ?根据 Python 之父 Guido van Rossum 的话，Python 是：一种高等法度榜样说话，其核心设计哲学是代>>>详细阅读

本文标题：网页适配iPhoneX，就是这么简单

地址：http://www.17bianji.com/lsqh/39243.html

 1/2    1