移动端适配：

  1. .safe-area {
  2.   padding-top: env(safe-area-inset-top);
  3.   padding-left: env(safe-area-inset-left);
  4.   padding-right: env(safe-area-inset-right);
  5.   padding-bottom: env(safe-area-inset-bottom);
  6. }
  1. <meta name="viewport" content="viewport-fit=cover">

ios

  1. HTML 中指定 viewport-fit 为 cover，让页面充满全屏；
  2. CSS 中可用 env() 获取对应安全区域。

Android ：

  1. 保留顶部安全高度，或者保留导航栏；
  2. App 通过 jsbridge 告诉 H5 需要留出多少距离。(推荐)

链接

宏任务与微任务

image.png
链接

nextTick()

同一事件循环中的代码执行完毕 -> DOM 更新 -> nextTick callback触发
使用Vue.nextTick()是为了可以获取更新后的DOM 。
触发时机：在同一事件循环中的数据变化后，DOM完成更新，立即执行Vue.nextTick()的回调。

BFC

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。