使用@supports完美兼容CSS属性

今天写微信小程序遇到一个问题:给page加 150rpx 的 padding-bottom 值,我考虑到 iphone X 系列的底部黑线,参考我之前写的css属性——env()和constant()设置安全区域;所以我这样写:

page{
  padding-bottom: calc( constant(safe-area-inset-bottom) + 150rpx);
  padding-bottom: calc( env(safe-area-inset-bottom) + 150rpx);
}

这样写,在开发者工具、安卓手机、iphoneX系列手机都没问题,都能识别到,然后我用我的古董机(iphone SE 1代,IOS 10.3系统),发现 padding-bottom 无效,尝试了多次,最后发现可以使用 css 的 @supports,使用方法和 @media 差不多:

page{
  padding-bottom: calc( constant(safe-area-inset-bottom) + 150rpx);
  padding-bottom: calc( env(safe-area-inset-bottom) + 150rpx);
}
/* not 表示不支持括号内的属性 */
@supports not(constant(safe-area-inset-bottom)){
  page{
    padding-bottom: 150rpx;
  }
}

然后就完美兼容各个手机了。最后附上MDN文档

青云直上三千码
posted @ 2021-04-21 19:58  青云码上  阅读(327)  评论(0编辑  收藏  举报