如何让特定定位的div随浏览器宽度自适应缩放而非依赖媒体查询

• 核心思路是让容器自适应视口宽度，而非依赖固定宽度+媒体查询的被动调整：
  1. 给容器设置max-width限制最大宽度，同时用width: 100%确保容器能随视口缩小：

  .container {
    max-width: 1200px; /* 替换成你需要的最大宽度 */
    width: 100%;
    margin: 0 20px; /* 保留你需要的左右边距 */
    box-sizing: border-box; /* 避免padding/border撑大容器 */
  }
  

  2. 如果需要在小屏下移除边距，媒体查询仍可保留，但此时容器在碰到浏览器边缘时已经自动缩小，不会出现截断：

  @media (max-width: 768px) {
    .container {
      margin: 0;
    }
  }
  

  3. 检查子元素：如果子元素有固定宽度，给它们加上max-width: 100%，防止子元素撑破容器：

  .container > * {
    max-width: 100%;
    box-sizing: border-box;
  }
  

原理说明 #

原来的写法（固定宽度+margin）会导致当视口宽度小于「固定宽度+左右margin总和」时，容器无法缩小，直接超出视口被截断。改用max-width + width:100%后，容器会自动适应视口宽度，同时不超过设定的最大宽度，达到「碰到边缘就缩小」的效果。

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