mirror of
https://github.com/imsyy/home.git
synced 2024-11-16 11:42:18 +08:00
feat: 解决小屏移动端显示问题 并优化细节
问题: 当(移动端)屏幕较小时,会造成组件重叠、组件在屏幕外(显示不全)等。 1. 对小屏移动端(手机)显示做优化,特别是横屏。=> 低于高度或者宽度显示阈值,则固定大小,使用滚轮 2. 对显示滚轮做优化,使组件在出现滚轮时不产生瞬间偏移,造成视觉割裂感 3. 因为做了小屏显示的优化, 我认为不必将设置界面阈值设置为990,我降低到了720(让移动端也可以开启),并对其做了响应式
This commit is contained in:
parent
6b778d3782
commit
0ea222c376
66
src/App.vue
66
src/App.vue
|
@ -27,7 +27,7 @@
|
||||||
</Icon>
|
</Icon>
|
||||||
<!-- 页脚 -->
|
<!-- 页脚 -->
|
||||||
<Transition name="fade" mode="out-in">
|
<Transition name="fade" mode="out-in">
|
||||||
<Footer v-show="!store.backgroundShow && !store.setOpenState" />
|
<Footer class="f-ter" v-show="!store.backgroundShow && !store.setOpenState" />
|
||||||
</Transition>
|
</Transition>
|
||||||
</main>
|
</main>
|
||||||
</Transition>
|
</Transition>
|
||||||
|
@ -69,8 +69,9 @@ const loadComplete = () => {
|
||||||
watch(
|
watch(
|
||||||
() => store.innerWidth,
|
() => store.innerWidth,
|
||||||
(value) => {
|
(value) => {
|
||||||
if (value < 990) {
|
if (value < 721) {
|
||||||
store.boxOpenState = false;
|
store.boxOpenState = false;
|
||||||
|
store.setOpenState = false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
@ -140,6 +141,7 @@ onBeforeUnmount(() => {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
padding: 0 0.5vw;
|
||||||
.all {
|
.all {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -188,5 +190,65 @@ onBeforeUnmount(() => {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (max-height: 720px) {
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
.container {
|
||||||
|
height: 721px;
|
||||||
|
.more {
|
||||||
|
height: 721px;
|
||||||
|
width: calc(100% + 6px);
|
||||||
|
}
|
||||||
|
@media (min-width: 391px) {
|
||||||
|
// w 1201px ~ max
|
||||||
|
padding-left: 0.7vw;
|
||||||
|
padding-right: 0.25vw;
|
||||||
|
@media (max-width: 1200px) { // w 1101px ~ 1280px
|
||||||
|
padding-left: 2.3vw;
|
||||||
|
padding-right: 1.75vw;
|
||||||
|
}
|
||||||
|
@media (max-width: 1100px) { // w 993px ~ 1100px
|
||||||
|
padding-left: 2vw;
|
||||||
|
padding-right: calc(2vw - 6px);
|
||||||
|
}
|
||||||
|
@media (max-width: 992px) { // w 901px ~ 992px
|
||||||
|
padding-left: 2.3vw;
|
||||||
|
padding-right: 1.7vw;
|
||||||
|
}
|
||||||
|
@media (max-width: 900px) { // w 391px ~ 900px
|
||||||
|
padding-left: 2vw;
|
||||||
|
padding-right: calc(2vw - 6px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
top: 605.64px; // 721px * 0.84
|
||||||
|
left: 170.5px; // 391 * 0.5 - 25px
|
||||||
|
@media (min-width: 391px) {
|
||||||
|
left: calc(50% - 25px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.f-ter {
|
||||||
|
top: 675px; // 721px - 46px
|
||||||
|
@media (min-width: 391px) {
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 390px) {
|
||||||
|
overflow-x: auto;
|
||||||
|
.container {
|
||||||
|
width: 391px;
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
left: 167.5px; // 391px * 0.5 - 28px
|
||||||
|
}
|
||||||
|
.f-ter {
|
||||||
|
width: 391px;
|
||||||
|
}
|
||||||
|
@media (min-height: 721px) {
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -58,7 +58,7 @@ const descriptionText = reactive({
|
||||||
|
|
||||||
// 切换右侧功能区
|
// 切换右侧功能区
|
||||||
const changeBox = () => {
|
const changeBox = () => {
|
||||||
if (store.getInnerWidth >= 990) {
|
if (store.getInnerWidth >= 721) {
|
||||||
store.boxOpenState = !store.boxOpenState;
|
store.boxOpenState = !store.boxOpenState;
|
||||||
} else {
|
} else {
|
||||||
ElMessage({
|
ElMessage({
|
||||||
|
@ -112,7 +112,7 @@ watch(
|
||||||
.sm {
|
.sm {
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
@media (min-width: 720px) and (max-width: 789px) {
|
@media (min-width: 721px) and (max-width: 789px) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -166,28 +166,28 @@ watch(
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 390px) {
|
// @media (max-width: 390px) {
|
||||||
.logo {
|
// .logo {
|
||||||
flex-direction: column;
|
// flex-direction: column;
|
||||||
.logo-img {
|
// .logo-img {
|
||||||
display: none;
|
// display: none;
|
||||||
}
|
// }
|
||||||
.name {
|
// .name {
|
||||||
margin-left: 0;
|
// margin-left: 0;
|
||||||
height: auto;
|
// height: auto;
|
||||||
transform: none;
|
// transform: none;
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
.bg {
|
// .bg {
|
||||||
font-size: 3.5rem;
|
// font-size: 3.5rem;
|
||||||
}
|
// }
|
||||||
.sm {
|
// .sm {
|
||||||
font-size: 1.4rem;
|
// font-size: 1.4rem;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
.description {
|
// .description {
|
||||||
margin-top: 2.5rem;
|
// margin-top: 2.5rem;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -127,6 +127,15 @@ onBeforeUnmount(() => {
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
font-family: "UnidreamLED";
|
font-family: "UnidreamLED";
|
||||||
}
|
}
|
||||||
|
@media (min-width: 1201px) and (max-width: 1280px) {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
@media (min-width: 911px) and (max-width: 992px) {
|
||||||
|
font-size: 1rem;
|
||||||
|
.text {
|
||||||
|
font-size: 2.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.weather {
|
.weather {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
@ -39,7 +39,7 @@ const siteUrl = computed(() => {
|
||||||
.logo {
|
.logo {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-family: "Pacifico-Regular";
|
font-family: "Pacifico-Regular";
|
||||||
font-size: 1.75rem;
|
font-size: 2.25rem;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 6%;
|
top: 6%;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
@ -49,9 +49,16 @@ const siteUrl = computed(() => {
|
||||||
&:active {
|
&:active {
|
||||||
transform: scale(0.95);
|
transform: scale(0.95);
|
||||||
}
|
}
|
||||||
@media (min-width: 720px) {
|
@media (min-width: 721px) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@media (max-height: 720px) {
|
||||||
|
width: calc(100% + 6px);
|
||||||
|
top: 43.26px; // 721px * 0.06
|
||||||
|
}
|
||||||
|
@media (max-width: 390px) {
|
||||||
|
width: 391px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 720px) {
|
@media (max-width: 720px) {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
|
|
@ -145,6 +145,23 @@ const jumpTo = (url) => {
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 990px) {
|
||||||
|
.bg {
|
||||||
|
font-size: 4.5rem;
|
||||||
|
}
|
||||||
|
.sm {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 825px) {
|
||||||
|
.bg {
|
||||||
|
font-size: 3.8rem;
|
||||||
|
}
|
||||||
|
.sm {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.version {
|
.version {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user