KIRAKIRA-DOUGA / KIRAKIRA-Cerasus

KIRAKIRA's frontend powered by Nuxt 3.
https://kirakira.moe
BSD 3-Clause "New" or "Revised" License
107 stars 18 forks source link

feat: add viewport unit fallback to improve compatibility #269

Closed Aira-Sakuranomiya closed 3 days ago

Aira-Sakuranomiya commented 3 days ago

在不兼容dvh、dvw等单位的浏览器上使用vh、vw,以此来确保页面布局大致正确,可以缓解#191, #192

原代码

.foo {
  height: 100dvh;
}

经过PostCSS插件postcss-viewport-unit-fallback处理输出后

.foo {
  height: 100vh; /* 此行自动添加,会在不兼容dvh的旧浏览器上使用 */
  height: 100dvh; /* 支持dvh的新浏览器会使用这个 */
}

注: 合并时请使用squash merge,尾部自动添加的(#269)请保留