iphoneX 适配

哇偶哇偶Z

于 2019-04-24 12:08:36 发布

阅读量126

点赞数

分类专栏： JS基础

本文链接：https://blog.csdn.net/ddwddw4/article/details/89003831

版权

JS基础专栏收录该内容

103 篇文章 1 订阅

订阅专栏

参考资料：

https://www.cnblogs.com/lolDragon/p/7795174.html

https://www.w3cplus.com/css/the-notch-and-css.html

// iphoneX 适配
@mixin iphone-x () {
  @media only screen and (device-width: 375px) and (device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    @content;
  }
}
 
// 固定底部的元素
%fixed-bottom {
  position: fixed;
  bottom: 0;
  @include iphone-x {
    &::after {
      content: '';
      display: block;
      height: constant(safe-area-inset-bottom);
      width: 100%;
    }
  }
}
 
.footer {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    height: u(50);
    @extend %fixed-bottom;
}