其他

css safe-area-inset-bottom 解释

• env(safe-area-inset-bottom)
• env(safe-area-inset-top)

他们属于CSS中的变量，用于获取设备底部和顶部安全区域的大小。

所谓的安全区域就是指在iPhone X及以上的设备中，为避免被屏幕的“刘海”和“Home Indicator”所遮挡或者覆盖的有效区域区域，以确保内容在安全区域内显示。

和padding的结合

padding-bottom: env(safe-area-inset-bottom);

如果想让安全区域再靠上20px，则结合calc使用如下

padding-bottom: calc(20px + env(safe-area-inset-bottom));

和height的结合

height: calc(100vh - 144px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) ;

注意

以上写法貌似在兼容iphoneX的工程上宣告结束了...然而...在某些机型上识别不出env(safe-area-inset-bottom)和env(safe-area-inset-top)，导致高度等失效，需要再做一次兼容，兼容某些不识别这些变量的机型。拿和height结合举例说明，可做如下兼容

/*
    兼容普通机型，不识别变量的机型：
*/
height: calc(100vh - 144px);
/*
    兼容苹果手机
*/
height: calc(100vh - 144px - env(safe-area-inset-top) - env(safe-area-inset-bottom));

/*
    constant 已被废弃
*/
constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/

如果识别这两个变量，则执行第二句，覆盖第一句；如果不识别这两个变量呢，则不识别第二句，执行第一句。这就是一个完美的兼容写法！

对齐方式

图片和文字对齐问题，图片和文字默认是基线对齐
解决方案

• 将图片块级元素
• 设置图片对齐方式不是基线对齐

属性值	效果
baseline	默认基线对齐
top	顶端对齐
middle	中部对齐
bottom	底部对齐

滚动条平滑滚动

没有当通过js或者其他方式滚动到某个位置时动画效果比较生硬，或者滚动效果是瞬间达到，可以使用这个他有一个平滑滚动的效果

scroll-behavior: smooth;