update: 更新样式以支持移动端适配,添加底部安全区域和隐藏横向溢出
This commit is contained in:
parent
3b842e0b48
commit
6bc2b53381
|
@ -26,6 +26,8 @@ body {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
height: -webkit-fill-available; /* 移动端浏览器兼容 */
|
||||
overflow-x: hidden;
|
||||
/* display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px; */
|
||||
|
@ -66,6 +68,26 @@ button:focus-visible {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
/* 添加底部安全区域 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
/* 移动端适配 */
|
||||
@media screen and (max-width: 768px) {
|
||||
html {
|
||||
height: -webkit-fill-available;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
min-height: -webkit-fill-available;
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
min-height: -webkit-fill-available;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
|
|
Loading…
Reference in New Issue