examples/vue-ts-example
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

feat: 优化响应式布局，使用 CSS 支持的单位调整屏幕高度和宽度
Some checks failed
/ build-and-deploy-to-vercel (push) Successful in 2m42s
Details
/ lint-build-and-check (push) Successful in 4m25s
Details
/ surge (push) Successful in 2m18s
Details
/ playwright (push) Failing after 5m2s
Details

Browse Source
This commit is contained in:
严浩
2025-03-31 15:30:45 +08:00
parent 3edb7392ce
commit 12d5ee979f
2 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.vue
View File

@ -27,10 +27,14 @@ const themeConfig = computed(() => {
.layout-wrapper { .layout-wrapper {
isolation: isolate; isolation: isolate;
} }
.w-screen { @supports (height: 100dvh) {
width: 100dvw; .h-screen {
height: 100dvh;
}
} }
.h-screen { @supports (width: 100dvw) {
height: 100dvh; .w-screen {
width: 100dvw;
}
} }
</style> </style>

2
src/pages/index-new.page.vue
View File

@ -7,7 +7,7 @@ import {
</script> </script>
<template> <template>
<div class="p-4" style="height: 100dvh; width: 100dvw"> <div class="p-4 h-screen w-screen">
<PatternBackground <PatternBackground
:animate="true" :animate="true"
:direction="PATTERN_BACKGROUND_DIRECTION.TopRight" :direction="PATTERN_BACKGROUND_DIRECTION.TopRight"