vue 将以下代码修改为按屏幕比例进行缩放时保持原比例且不出现滚动条<template> <div class="energy-platform"> <!-- 顶部标题 --> <div class="header"> <h1 class="company-name">XX公司</h1> <h2 class="platform-name">XX云综合管理平台</h2> <div class="gradient-bar"></div> <!-- 渐变导航条 --> </div> <!-- 应用菜单 --> <div class="app-container"> <el-row :gutter="20"> <el-col v-for="(app, index) in apps" :key="index" :xs="24" :sm="12" :md="6" :lg="6"> <div target="_blank" class="app-card" @mouseenter="hoverIndex = index" @mouseleave="hoverIndex = -1" @click="goIndex" :style="{ backgroundColor: hoverIndex === index ? '#c5edff' : '#fff' }"> <div class="app-icon"> <img :src="require(`../assets/image/${app.icon}.png`)" :alt="app.name" class="img-item2"> </div> <div class="app-title">{{ app.name }}</div> </div> </el-col> </el-row> </div> </div> </template> <script> export default { name: "Home", data() { return { hoverIndex: -1, apps: [{ name: '智慧应用', icon: 'el-icon-cpu', }, { name: '运行监测', icon: 'el-icon-monitor', }, { name: 'AI仿真', icon: 'el-icon-data-analysis', }, { name: '数据中台', icon: 'el-icon-data-board', } ], redirect: undefined } }, mounted() { console.log('设备像素比：', window.devicePixelRatio); }, methods: { goIndex() { this.$router.replace({ path: "Index" }) } } } </script> <style scoped> .energy-platform { box-sizing: border-box; padding: 120px 260px; width: 100%; height: 100%; /* min-height: 100vh; */ background-image: url('../assets/image/bg.png'); /* 背景图片设置 */ background-size: 100% 100%; background-position: center; background-repeat: no-repeat; filter: brightness(1); } .header { text-align: left; font-style: italic; color: #fff; font-size: 40px; } .company-name { margin-bottom: 30px; } .company-name, .platform-name { text-align: left; font-weight: bold; margin-bottom: 20px; color: #fff; } .gradient-bar { height: 4px; background: linear-gradient(to right, #29b0dd, #2aaed9, #ffffff); width: 260px; margin-bottom: 90px; } .app-container { margin: 0 auto; } .app-card { height: 260px; width: 80%; background: #fff; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); margin-bottom: 20px; } .img-item2 { width: 100%; } .app-card:hover { transform: translateY(-5px); box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.15); } .app-icon { font-size: 50px; color: #333; margin-bottom: 40px; transition: all 0.3s ease; } .app-card:hover .app-icon { color: #fff; } .app-title { font-size: 22px; font-weight: bold; color: #333; transition: all 0.3s ease; } .app-card:hover .app-title { color: #000; } /* 响应式调整 */ @media (max-width: 768px) { .company-name { font-size: 40px; } .platform-name { font-size: 20px; } .app-card { height: 120px; width: 100%; } .app-icon { font-size: 30px; margin-bottom: 10px; } .app-title { font-size: 16px; } .gradient-bar { margin-bottom: 40px; } } /* 响应式调整 */ @media (max-width: 1366px) { .energy-platform { padding: 150px 100px; } .app-card { width: 90%; } } /* 响应式调整 */ @media (max-width: 1024px) { .energy-platform { padding: 150px 200px; } .app-card { width: 100%; } } /* 响应式调整 */ @media (max-height: 768px) { .energy-platform { padding: 50px 120px; } .app-card { width: 100%; } } </style>

<think>我们需要实现的目标：按屏幕比例进行缩放时保持原比例且不出现滚动条。 分析：不出现滚动条意味着整个页面内容要完全适应屏幕，不能超出。同时保持原比例（即保持设计时的宽高比例）缩放。 常见的做法是使用CSS的视口单位（vw, vh）和缩放变换（transform: scale）来实现。但这里我们也可以考虑使用一个容器，使其固定为设计时的宽高比，然后根据屏幕的宽高比进行缩放，并保证内容不超出。 然而，我们注意到原代码中使用了固定内边距（padding: 120px 260px;）以及背景图片的100%覆盖。这可能会导致在缩放时出现滚动条。 我们可以采取以下步骤： 1. 将整个页面容器设置为100vw和100vh，并隐藏溢出。 2. 设计一个基准容器，其宽高比为我们设计时的宽高比（比如1920x1080，即16:9）。 3. 使用缩放（scale）来调整这个基准容器，使其适应屏幕，同时保持宽高比。 4. 内容都放在这个基准容器内，这样缩放时内容就会按比例缩放。 但是，由于原代码已经使用了一些响应式媒体查询，我们需要重新组织。 另一种更简单的方法：使用CSS的`transform: scale()`来缩放整个容器，并且根据屏幕的宽高比来调整缩放比例，同时保证内容居中且不出现滚动条。 具体步骤： 1. 将最外层容器（.energy-platform）设置为视口宽度和高度（100vw, 100vh），并设置overflow:hidden。 2. 在.energy-platform内部创建一个包裹容器（比如.wrapper），这个包裹容器使用固定宽高（比如1920px宽，1080px高，即设计稿的尺寸），然后通过transform: scale()进行缩放，缩放比例取当前视口宽度与设计稿宽度的比值和视口高度与设计稿高度的比值的最小值，这样能保证全部内容在视口内且不会出现滚动条。 3. 同时，为了保持居中，我们还需要使用定位将包裹容器居中。 但是，由于原代码结构已经存在，我们可以在.energy-platform上做文章，将其改为使用缩放的方式。 然而，直接修改原结构可能会影响内部元素的布局，所以我们采用包裹容器的方式。 修改方案： - 在template中，将原有内容包裹在一个div中，例如添加一个div class="wrapper"，然后我们在这个wrapper上做缩放。 - 同时，去掉原.energy-platform的padding，因为wrapper会包含整个设计尺寸，然后通过缩放来适应。 设计稿尺寸：假设设计稿为1920x1080（常见的大屏设计尺寸）。如果没有明确，我们可以根据原代码中的padding和布局来推断，但原代码中使用了padding:120px 260px，所以内容区域宽度为1920-260*2=1400px，高度为1080-120*2=840px？这并不准确。所以我们需要重新考虑。 实际上，我们更希望整个页面（包括背景）都按比例缩放，所以应该将整个.energy-platform作为设计稿尺寸，然后进行缩放。 由于原代码中.energy-platform的宽度和高度都是100%，并且有内边距，这会导致实际内容区域小于屏幕。我们改变思路： 我们可以将.energy-platform的宽高设置为设计稿的宽高（比如1920px和1080px），然后通过transform进行缩放，并居中显示。 具体修改： 1. 在.energy-platform外面包裹一个div，用于控制缩放和居中。 2. 外层容器（比如.scale-container）设置为100vw和100vh，并隐藏溢出，然后使用flex或绝对定位使内容居中。 3. 将.energy-platform的宽高设置为1920px和1080px（设计稿尺寸），然后通过transform-origin: 0 0; 和transform: scale(calc(100vw/1920), calc(100vh/1080)); 这样会导致宽高分别缩放，破坏比例。因此，我们需要统一使用一个缩放比例，这个比例是min(100vw/1920, 100vh/1080)。 但是，由于CSS中无法直接使用min函数在transform属性中，我们可以使用一个缩放比例变量，通过JS计算并设置。 然而，为了简化，我们可以使用纯CSS的方案：使用一个伪元素来保持宽高比（比如padding-top: 56.25% for 16:9），但是这样不能精确控制内容。 因此，我建议使用JS来动态计算缩放比例，并设置transform。 但是，考虑到性能，我们也可以使用纯CSS的方式，使用一个包裹层，设置宽高为100%和100%，然后使用transform: scale()，但缩放比例需要计算。 另一种纯CSS方案：使用视口单位设置字体大小，然后所有尺寸使用rem/em，但这样修改量很大。 综合考虑，我们使用JS动态计算缩放比例，并设置transform。 步骤： 1. 在.energy-platform外面包裹一个div，并设置这个div为全屏（100vw,100vh）且居中（使用flex布局）。 2. 在mounted中，计算缩放比例，并设置.energy-platform的transform。 3. 监听窗口大小变化，重新计算缩放比例。 修改template: <div class="scale-container"> <div class="energy-platform"> ...原有内容 </div> </div> 修改style: .scale-container { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; background: #000; /* 如果缩放后边缘露出来，可以用背景色填充 */ } .energy-platform { transform-origin: center center; /* 初始设计尺寸 */ width: 1920px; height: 1080px; /* 其他样式调整：去掉padding，因为设计尺寸已经固定，所以内部元素按设计稿布局 */ } 然后，在mounted中，我们写一个函数来计算缩放比例并设置transform。 但是，注意：原.energy-platform有padding，我们将其去掉，并且将内部元素的位置调整到设计稿的样子（原来是通过padding来定位的，现在需要调整内部元素的定位，因为整个容器已经固定宽高）。 由于修改设计尺寸会改变原有布局，我们需要重新调整内部元素的样式（比如标题的位置，菜单的位置等），使其符合设计稿（1920x1080）的布局。 因此，我们需要： 1. 去掉.energy-platform的padding，改为固定宽高（1920px, 1080px）。 2. 调整内部元素的位置，比如将标题定位在左上角，并设置具体的位置（例如使用margin或position定位）。 为了减少改动，我们可以将.energy-platform设置为相对定位，然后内部元素使用绝对定位来放置。 但是，这样改动很大。我们也可以保持原有结构，但将.energy-platform的padding去掉，然后通过内部元素设置margin来达到类似效果。 原样式： padding: 120px 260px; 在1920x1080的设计稿中，这个padding相当于左右各260px，上下各120px。所以内容区域宽度为1400px，高度为840px。 我们可以将.energy-platform的padding去掉，然后设置.header和.app-container的margin来达到同样的效果。 修改后的.energy-platform样式： .energy-platform { width: 1920px; height: 1080px; background-image: ...; background-size: cover; /* 改为cover，确保背景覆盖整个容器 */ position: relative; /* 为内部绝对定位做准备 */ } .header { position: absolute; left: 260px; top: 120px; } .app-container { position: absolute; left: 260px; top: 120px + 标题高度 + 导航条高度 + 标题与导航条的间距; 但是这样计算很麻烦，我们可以保持原有结构，但将.energy-platform的padding去掉，然后在.header和.app-container上设置margin。 另一种方式：保留.energy-platform的padding，但改为百分比或者固定值，但是这样在缩放时可能不一致。所以我们还是采用固定padding（在1920x1080下固定为120px 260px），然后通过缩放整个容器来实现。 因此，我们不需要改变内部结构，只需要将.energy-platform的宽高固定为1920px和1080px，并保留padding为120px 260px，然后整个容器缩放。 具体步骤： 1. 修改template，在最外层包裹.scale-container。 2. 修改.energy-platform的样式：固定宽高，并设置transform-origin为左上角（0,0）？但是这样缩放后位置会偏移，所以我们需要在.scale-container中居中显示，然后缩放后调整位置。 但是，使用JS计算缩放比例和位置更灵活。 我们使用JS方案： 在mounted和resize事件中，计算缩放比例scale = Math.min(window.innerWidth / 1920, window.innerHeight / 1080) 然后设置.energy-platform的transform: `scale(${scale})` 同时，为了居中，我们设置.energy-platform的transform-origin为0 0，然后通过margin-left和margin-top调整位置？或者使用绝对定位，设置left和top。 但是，我们已经在.scale-container中使用了flex居中，所以缩放后，由于.energy-platform的宽高是1920px和1080px，缩放后实际占据的宽高为1920*scale和1080*scale，然后flex居中会自动将其居中。 所以，我们可以这样： .scale-container { display: flex; justify-content: center; align-items: center; overflow: hidden; } .energy-platform { width: 1920px; height: 1080px; transform-origin: center center; /* 缩放中心在中心，这样缩放后不会影响布局，但是居中时位置计算会以中心点为准 */ /* 或者不设置transform-origin，默认是中心 */ } 然后通过JS设置transform: scale(scale) 注意：缩放后，.energy-platform的实际尺寸会变小，所以flex居中会将其居中显示。 修改代码： 步骤1：修改template，添加.scale-container包裹。 步骤2：修改.energy-platform的样式，去掉padding，设置固定宽高，并调整内部元素的位置（因为去掉了padding，所以我们需要用其他方式实现内部元素的位置）。 但是，原代码中内部元素是依靠padding来定位的，所以我们需要将.energy-platform的padding去掉，然后在.header和.app-container上设置margin来达到同样的效果，或者使用定位。 为了快速实现，我们可以将.energy-platform设置为： padding: 120px 260px; /* 保留这个padding，因为设计稿就是这样的，所以整个容器的宽高是1920x1080，内容区域是1400x840（减去padding） */ box-sizing: border-box; /* 这样padding不会增加总宽高 */ 所以，.energy-platform的样式修改为： .energy-platform { width: 1920px; height: 1080px; padding: 120px 260px; box-sizing: border-box; background-image: ...; background-size: cover; /* 注意：背景覆盖整个容器，包括padding区域，所以设置为cover会覆盖整个1920x1080 */ /* 其他样式不变 */ } 步骤3：添加.scale-container的样式，并设置JS缩放。 修改后的template: <template> <div class="scale-container"> <div class="energy-platform"> ...原有内容 </div> </div> </template> 在mounted中，添加缩放函数并监听resize事件。 代码实现： 在mounted中： mounted() { this.adjustScale(); window.addEventListener('resize', this.adjustScale); }, beforeDestroy() { window.removeEventListener('resize', this.adjustScale); }, methods: { adjustScale() { const container = document.querySelector('.energy-platform'); if (container) { const scaleX = window.innerWidth / 1920; const scaleY = window.innerHeight / 1080; const scale = Math.min(scaleX, scaleY); container.style.transform = `scale(${scale})`; } }, ...其他方法 } 但是，这样缩放后，.energy-platform的实际占位大小还是1920x1080，所以.scale-container会按照这个大小来居中，然后缩放后，实际显示大小是1920*scale x 1080*scale，所以我们需要让.scale-container忽略其原始尺寸，只按缩放后的尺寸来居中。我们可以使用绝对定位，并设置top:50%; left:50%; 然后通过transform: translate(-50%,-50%)来居中，但这样会干扰缩放。所以还是用flex居中。 另一种方案：将.energy-platform设置为绝对定位，然后通过transform: translate(-50%, -50%)和top:50%; left:50%; 来居中，然后再缩放。但是这样缩放后，位置会偏移。 因此，我们保持用flex居中，并且.energy-platform的transform只设置缩放。这样，缩放后，.energy-platform的原始尺寸仍然占据文档流，但是flex居中会按照原始尺寸居中，然后缩放后，实际显示尺寸变小，但位置居中。 但是，这样会导致.scale-container出现滚动条吗？不会，因为我们设置了overflow:hidden。 所以，我们设置.scale-container的样式： .scale-container { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } 这样，当缩放后，.energy-platform的实际显示尺寸小于或等于视口，所以不会出现滚动条。 但是，当宽高比和设计稿不一致时，两边或上下会有留白（由.scale-container的背景色填充）。 最后，我们还需要调整背景图，因为.energy-platform的宽高固定为1920x1080，所以背景图设置为cover会覆盖整个容器。 修改后的样式： .scale-container { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; background: #000; /* 用于填充留白的背景色 */ } .energy-platform { width: 1920px; height: 1080px; padding: 120px 260px; box-sizing: border-box; background-image: url('../assets/image/bg.png'); background-size: cover; /* 覆盖整个容器 */ background-position: center; background-repeat: no-repeat; filter: brightness(1); /* 去掉原有的width:100%; height:100%; */ /* 原有的内边距保留，但通过box-sizing: border-box保证总宽高不变 */ } 然后，我们修改响应式媒体查询？因为现在缩放已经实现了，所以媒体查询可能不需要了，或者需要调整，因为内部元素也会被缩放。 但是，媒体查询仍然会生效，因为缩放不会改变CSS像素。所以我们需要去掉原有的媒体查询，或者调整媒体查询的触发条件。 由于我们使用了缩放，所以内部元素的尺寸（px）也会按比例缩放，因此在不同屏幕下，元素看起来大小一致。所以我们可以去掉原有的媒体查询，或者保留用于非常小的屏幕（比如手机）的布局调整。 但是，如果设计稿是1920x1080，那么在手机上，缩放比例会非常小，导致内容看不清。所以可能需要额外的布局调整（比如改变排列方式，字体大小等）。这超出了本题的范围。 因此，我们先按上述方案修改，然后测试。 注意：原代码中使用了element-ui的栅格系统，它也是基于屏幕的CSS像素，所以缩放后，栅格布局可能不会按预期缩放。因此，我们需要将栅格布局的尺寸也改为固定px，然后由整体缩放来控制。或者，我们也可以将栅格系统去掉，改用固定布局，然后通过缩放来适应。 但是，由于整个页面都被缩放了，所以element-ui的组件也会被缩放，这样可能会影响布局（例如，如果栅格系统使用百分比，那么缩放后，它仍然会按照父容器的百分比，而父容器是1920px，所以每个栅格的宽度是固定的，然后缩放后，整体缩小）。所以，我们暂时保留，看效果。 修改步骤总结： 1. 在.energy-platform外面添加.scale-container。 2. 修改.energy-platform的样式：固定宽高1920px*1080px，设置padding（原值），box-sizing: border-box，背景图覆盖。 3. 去掉.energy-platform原有的width:100%和height:100%以及min-height:100vh。 4. 添加.scale-container的样式。 5. 在mounted中，添加adjustScale方法，并监听resize事件。 6. 调整内部元素样式：因为原.header和.app-container的样式可能依赖.energy-platform的100%宽高，现在固定了宽高，所以需要检查是否正常显示。 但是，原.header是文本左对齐，而.app-container是自动居中，所以应该不需要调整。 另外，原代码中.app-card的宽度是80%，这个80%是相对于其父容器（el-col）的宽度，而el-col的宽度由栅格系统决定，栅格系统又基于父容器（.app-container）的宽度，而.app-container的宽度是1400px（1920-260*2）？所以，这仍然是一个固定布局，缩放后整体会缩小。 因此，我们按照上述步骤修改。 但是，由于原代码中使用了媒体查询，我们可能需要调整媒体查询的条件，或者删除，因为缩放后在小屏幕上内容会很小，可能需要额外的调整。但这不是本题的重点，我们先实现缩放。 下面给出修改后的代码： 注意：由于我们添加了.scale-container，所以template结构变化。 修改后的代码：</think>要实现按屏幕比例缩放时保持原比例且不出现滚动条，需要以下关键修改： 1. 添加外层容器控制缩放和居中 2. 使用JS动态计算缩放比例 3. 移除固定内边距改用定位布局 4. 修改背景图适应方式 5. 调整媒体查询逻辑 ### 修改后的完整代码 ```vue <template> <!-- 添加外层缩放容器 --> <div class="scale-container"> <div class="energy-platform"> <!-- 顶部标题 --> <div class="header"> <h1 class="company-name">XX公司</h1> <h2 class="platform-name">XX云综合管理平台</h2> <div class="gradient-bar"></div> <!-- 渐变导航条 --> </div> <!-- 应用菜单 --> <div class="app-container"> <el-row :gutter="20"> <el-col v-for="(app, index) in apps" :key="index" :xs="24" :sm="12" :md="6" :lg="6"> <div target="_blank" class="app-card" @mouseenter="hoverIndex = index" @mouseleave="hoverIndex = -1" @click="goIndex" :style="{ backgroundColor: hoverIndex === index ? '#c5edff' : '#fff' }"> <div class="app-icon"> <img :src="require(`../assets/image/${app.icon}.png`)" :alt="app.name" class="img-item2"> </div> <div class="app-title">{{ app.name }}</div> </div> </el-col> </el-row> </div> </div> </div> </template> <script> export default { name: "Home", data() { return { hoverIndex: -1, apps: [{ name: '智慧应用', icon: 'el-icon-cpu', }, { name: '运行监测', icon: 'el-icon-monitor', }, { name: 'AI仿真', icon: 'el-icon-data-analysis', }, { name: '数据中台', icon: 'el-icon-data-board', } ], redirect: undefined } }, mounted() { console.log('设备像素比：', window.devicePixelRatio); this.adjustScale(); // 初始调整 window.addEventListener('resize', this.adjustScale); // 监听窗口变化 }, beforeDestroy() { window.removeEventListener('resize', this.adjustScale); // 清理监听器 }, methods: { goIndex() { this.$router.replace({ path: "Index" }) }, // 动态计算缩放比例 adjustScale() { const baseWidth = 1920; // 设计稿基准宽度 const baseHeight = 1080; // 设计稿基准高度 const scaleX = window.innerWidth / baseWidth; const scaleY = window.innerHeight / baseHeight; const scale = Math.min(scaleX, scaleY); // 取较小比例值 document.querySelector('.energy-platform').style.transform = `scale(${scale})`; } } } </script> <style scoped> /* 外层缩放容器 */ .scale-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; /* 防止出现滚动条 */ background: #000; /* 留黑边时的背景色 */ } .energy-platform { /* 设计稿基准尺寸 */ width: 1920px; height: 1080px; position: relative; background-image: url('../assets/image/bg.png'); background-size: cover; /* 保证背景图覆盖整个容器 */ background-position: center; background-repeat: no-repeat; filter: brightness(1); /* 使用transform实现缩放 */ transform-origin: center center; /* 移除原有padding */ padding: 0; } .header { position: absolute; top: 120px; left: 260px; text-align: left; font-style: italic; color: #fff; font-size: 40px; } .company-name { margin-bottom: 30px; } .company-name, .platform-name { text-align: left; font-weight: bold; margin-bottom: 20px; color: #fff; } .gradient-bar { height: 4px; background: linear-gradient(to right, #29b0dd, #2aaed9, #ffffff); width: 260px; margin-bottom: 90px; } .app-container { position: absolute; top: 340px; /* 120px header + 120px spacing + 100px gradient */ left: 260px; right: 260px; bottom: 120px; display: flex; align-items: center; justify-content: center; } .app-card { height: 260px; width: 80%; background: #fff; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); margin-bottom: 20px; } .img-item2 { width: 100%; } .app-card:hover { transform: translateY(-5px); box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.15); } .app-icon { font-size: 50px; color: #333; margin-bottom: 40px; transition: all 0.3s ease; } .app-card:hover .app-icon { color: #fff; } .app-title { font-size: 22px; font-weight: bold; color: #333; transition: all 0.3s ease; } .app-card:hover .app-title { color: #000; } /* 响应式调整 - 修改为基于缩放后的调整 */ @media (max-width: 768px) { .header { font-size: 24px; left: 5%; top: 5%; } .company-name { font-size: 28px; margin-bottom: 15px; } .platform-name { font-size: 20px; } .gradient-bar { width: 150px; margin-bottom: 30px; } .app-container { top: 30%; left: 5%; right: 5%; } .app-card { height: 120px; width: 100%; } .app-icon { font-size: 30px; margin-bottom: 10px; } .app-title { font-size: 16px; } } </style> ``` ### 关键修改说明： 1. **外层缩放容器 (scale-container)** - 使用固定定位覆盖整个视口 - `overflow: hidden` 确保不会出现滚动条 - Flex布局实现内容居中 2. **动态缩放实现** ```javascript adjustScale() { const baseWidth = 1920; // 设计稿基准宽度 const baseHeight = 1080; // 设计稿基准高度 const scaleX = window.innerWidth / baseWidth; const scaleY = window.innerHeight / baseHeight; const scale = Math.min(scaleX, scaleY); // 取较小比例值 document.querySelector('.energy-platform').style.transform = `scale(${scale})`; } ``` - 基于1920x1080设计稿计算缩放比例 - 取宽高比例中较小的值，确保内容完全可见 - 监听窗口大小变化实时调整 3. **布局结构调整** - 移除固定padding改用绝对定位 - 使用top/left/right/bottom精确控制内容区域 - 背景图使用`background-size: cover`确保完全覆盖 4. **响应式优化** - 媒体查询基于缩放后的实际像素 - 使用百分比定位替代固定像素值 - 调整小屏幕下的字体大小和间距 ### 实现原理： 1. 创建固定于视口的全屏容器 2. 内部容器保持设计稿原始尺寸(1920x1080) 3. 通过JS计算最小缩放比例并应用transform 4. 背景图cover模式填充，内容绝对定位 5. 媒体查询针对小屏幕优化布局 这种方法确保： - 保持原始设计比例 - 任何屏幕比例下都不会出现滚动条 - 内容始终居中显示 - 背景图完整覆盖 - 小屏幕下有专门的布局优化