了解基础知识
constant 函数包含以下属性
safe-area-inset-left
:安全区域距离左边界距离safe-area-inset-right
:安全区域距离右边界距离safe-area-inset-top
:安全区域距离顶部边界距离safe-area-inset-bottom
:安全区域距离底部边界距离
具体设置步骤如下:
1、要在html的head中设置:viewport-fit=cover
2、主要用到标签:
1 <div className="parent"> 2 <header></header> 3 <div className="content"></div> 4 <footer></footer> 5 </div>
3、然后我们要设置相应的css样式:
1 .parent{ 2 height:100vh; 3 4 footer{ 5 background-color: #fff; 6 position: fixed; 7 bottom: 0; 8 left: 0; 9 right: 0; 10 11 @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { 12 padding-bottom: calc(constant(safe-area-inset-bottom) - 20px); 13 padding-bottom: calc(env(safe-area-inset-bottom) - 20px); 14 } 15 } 16 }
注意为了是env,constant等样式兼容iphone生效必须设置当前dom标签的position:fixed,不然不生效,楼主呗坑过;