如何在页面宽度过小时阻止网页元素移位（Svelte开发场景）

你要的效果核心是通过CSS的min-width和滚动控制实现的，和苹果官网的逻辑一致，具体实现步骤如下：

核心思路 #

给页面的主内容容器设置一个最小宽度阈值，当浏览器视口宽度大于这个阈值时，容器自适应占满视口；当视口宽度小于阈值时，容器不再缩小，浏览器自动显示横向滚动条，让用户通过滚动查看完整内容，从而保持文本和视频的可读性。

Svelte 实现代码 #

在你的Svelte组件中，按以下结构调整：

<script>
  // 组件逻辑（如果有的话）
</script>

<style>
  /* 全局样式，确保body没有默认边距，横向滚动按需出现 */
  body {
    margin: 0;
    overflow-x: auto;
  }

  /* 主内容容器，设置宽度阈值 */
  .page-container {
    width: 100%;
    min-width: 1024px; /* 这里替换成你想要的宽度阈值，比如1200px */
    padding: 2rem;
    box-sizing: border-box; /* 内边距不会额外增加容器宽度 */
  }

  /* 文本内容样式，视口足够宽时自适应 */
  .content-text {
    max-width: 100%;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
  }

  /* 视频样式，保持宽高比 */
  .content-video {
    max-width: 100%;
    height: auto;
  }
</style>

<!-- 主容器包裹所有内容 -->
<div class="page-container">
  <p class="content-text">
    这里是你的页面文本内容，当页面宽度大于设定阈值时会自适应宽度，小于阈值时保持固定尺寸，需要横向滚动查看完整内容。
  </p>
  
  <video class="content-video" controls>
    <source src="your-video-source.mp4" type="video/mp4">
  </video>
</div>

关键细节说明 #

• 调整阈值：把min-width的值改成你需要的宽度（比如苹果官网常用1024px作为移动端和桌面端的分界阈值）
• 盒子模型：box-sizing: border-box确保容器的内边距不会让总宽度超过min-width设定的值
• 视频适配：height: auto保证视频在任何情况下都保持原有宽高比，不会被拉伸变形
• 滚动控制：body上的overflow-x: auto只会在容器宽度超过视口时显示横向滚动条，不影响正常页面布局

如果需要针对不同阈值做更精细的样式调整，可以结合CSS媒体查询，但上面的基础写法已经能实现你要的核心效果。

内容的提问来源于stack exchange，提问作者helpmepls