使用@supports完美兼容CSS属性

2021-04-23 04:26

阅读：677

标签：微信安卓安全 web evel log htm 工具 lov

今天写微信小程序遇到一个问题：给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文档

使用@supports完美兼容CSS属性

标签：微信安卓安全 web evel log htm 工具 lov

原文地址：https://www.cnblogs.com/djjlovedjj/p/14686684.html

上一篇：C++的源程序改写成C语言类的成员函数和数据成员

下一篇：The different aspect of architecture（架构的不同方面）

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：使用@supports完美兼容CSS属性
文章链接：http://soscw.com/index.php/essay/78377.html

亲，登录后才可以留言！

使用@supports完美兼容CSS属性

评论

热门文章

推荐文章

最新文章

置顶文章