body { margin: 0 auto; padding: 0 auto; background-color: black; /* 默认背景色为黑色 */ display: flex; flex-direction: column; align-items: center; /* 水平居中内容 */ min-height: 100vh; /* 确保内容至少占据整个视口高度 */ position: relative; /* 为底部悬浮图片定位做准备 */ min-width: 320px; max-width: 640px; width: 100%; } .logo-container { position: absolute; top: 10px; left: 10px; z-index: 2; /* 确保 logo 在内容之上 */ display: flex; justify-content: center; align-items: center; } .logo { margin-top: 2vh; width: 64px; height: auto; display: block; } .body-image-container { width: 750px; /* 固定宽度 */ max-width: 100%; /* 适配手机屏幕 */ overflow: hidden; /* 裁剪超出容器的部分 */ } .body-image { display: block; width: 100%; /* 填充容器宽度 */ height: auto; } .fixed-bottom-image { position: fixed; bottom: 0; left: 0; width: 100%; /* 填充整个宽度 */ height: auto; /* 根据宽度自动调整高度 */ z-index: 10; /* 确保悬浮在其他内容之上 */ } .fixed-bottom-image img { display: block; width: 100%; height: auto; max-width: 640px; margin: 0 auto; } /* 针对小屏幕的额外样式调整 (可选) */ @media only screen and (max-width: 767px) { .logo-container { top: 0px; left: 20px; } .logo { width: 64px; } .body-image-container { width: 750px; /* 固定宽度 */ max-width: 100%; /* 适配手机屏幕 */ overflow: hidden; /* 裁剪超出容器的部分 */ } } /* 针对小屏幕的额外样式调整 (可选) */ @media only screen and (min-width: 768px) { .logo-container { top: 0px; left: 20px; } .logo { width: 168px; } .body-image-container { width: 750px; /* 固定宽度 */ max-width: 100%; /* 适配手机屏幕 */ overflow: hidden; /* 裁剪超出容器的部分 */ } }