diff --git a/css/style.css b/css/style.css index 07265ab..59c9bd2 100644 --- a/css/style.css +++ b/css/style.css @@ -21,9 +21,28 @@ body { color: #fff; min-width: 320px; overflow-x: hidden; - /* PC端缩放相关样式 */ - transform-origin: left top; - transition: transform 0.1s ease-out; + margin: 0; + padding: 0; +} + +/* PC端缩放包装器 */ +#scale-wrapper { + width: 100%; + height: 100vh; + overflow-x: hidden; /* 隐藏横向滚动条 */ + overflow-y: auto; /* 允许纵向滚动 */ + display: flex; + justify-content: center; + align-items: flex-start; +} + +/* 移动端不需要包装器 */ +@media screen and (max-width: 768px) { + #scale-wrapper { + height: auto; + overflow: visible; + display: block; + } } .container { @@ -32,8 +51,9 @@ body { flex-direction: column; justify-content: space-between; background: #000; - /* 固定最小宽度,避免缩放时内容挤压 */ - min-width: 1200px; + /* 固定设计稿宽度 */ + width: 1920px; + min-width: 1920px; } .cont{ @@ -48,11 +68,9 @@ body { /* 移动端下调整宽度 */ @media screen and (max-width: 768px) { body { - transform: none !important; - width: 100% !important; - min-width: 320px !important; - height: auto !important; - overflow-x: hidden !important; + width: 100%; + min-width: 320px; + overflow-x: hidden; } .container { diff --git a/index.html b/index.html index b7283ad..aaaa8f8 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,9 @@ -
+ +
+
头部装饰图片 diff --git a/js/main.js b/js/main.js index acc4a9f..75eae3c 100644 --- a/js/main.js +++ b/js/main.js @@ -16,51 +16,40 @@ let yearData = { // PC端等比例缩放函数 function setScale() { const screenWidth = window.innerWidth; + const container = document.querySelector('.container'); + const scaleWrapper = document.getElementById('scale-wrapper'); + + if (!container) return; // 移动端不缩放,保持响应式布局 if (screenWidth <= MOBILE_BREAKPOINT) { - document.body.style.transform = 'none'; - document.body.style.transformOrigin = 'left top'; - document.body.style.marginLeft = '0px'; - document.body.style.width = '100%'; - document.body.style.minWidth = '320px'; - document.body.style.height = 'auto'; - document.body.style.overflowX = 'hidden'; - document.documentElement.style.height = 'auto'; + if (scaleWrapper) { + scaleWrapper.style.transform = 'none'; + scaleWrapper.style.transformOrigin = ''; + scaleWrapper.style.height = 'auto'; + } + container.style.transform = 'none'; + container.style.width = '100%'; + container.style.minWidth = '320px'; return; } - // PC端等比例缩放 + // PC端等比例缩放 - 只基于宽度,保持设计稿宽高比 const scale = screenWidth / DESIGN_WIDTH; // 只限制最小缩放比例,允许放大 // 最小缩放到60%,最大可以放大填满屏幕 const finalScale = Math.max(scale, 0.6); - // 重置样式以获取真实内容高度 - document.body.style.transform = 'none'; - document.body.style.width = `${DESIGN_WIDTH}px`; - document.body.style.minWidth = `${DESIGN_WIDTH}px`; - document.body.style.height = 'auto'; + // 应用缩放到容器,而不是 body + container.style.transform = `scale(${finalScale})`; + container.style.transformOrigin = 'top center'; + container.style.width = `${DESIGN_WIDTH}px`; + container.style.minWidth = `${DESIGN_WIDTH}px`; + container.style.height = 'auto'; // 让内容自然撑开,不设置固定高度 - // 获取真实内容高度(使用 scrollHeight 获取完整内容高度) - const contentHeight = document.documentElement.scrollHeight || document.body.scrollHeight; - - // 计算缩放后的高度,添加2px余量确保内容完全显示 - const scaledHeight = Math.ceil(contentHeight * finalScale) + 2; - - // 应用缩放 - document.body.style.transform = `scale(${finalScale})`; - document.body.style.transformOrigin = 'left top'; - document.body.style.width = `${DESIGN_WIDTH}px`; - document.body.style.minWidth = `${DESIGN_WIDTH}px`; - document.body.style.height = `${scaledHeight}px`; - document.body.style.marginLeft = '0px'; - document.body.style.overflowX = 'hidden'; - - // 不限制 html 元素,让内容自然显示 - document.documentElement.style.height = ''; - document.documentElement.style.overflow = ''; + // 不需要额外计算高度,容器会自然撑开 + // 滚动会在 scale-wrapper 中进行 } // 模拟数据 - 小组排名