如何让固定宽度div在小屏设备自动缩小且不出现滚动条

直接给目标div添加max-width: 100%属性即可，不需要额外写媒体查询，完整CSS配置如下：

.your-div-class {
  width: 550px;
  max-width: 100%;
  /* 以下为可选配置，根据实际需求添加 */
  box-sizing: border-box; /* 若设置了内边距/边框，添加该属性避免总宽度溢出 */
  padding: 0 15px; /* 避免小屏设备下内容紧贴屏幕边缘 */
  margin: 0 auto; /* 实现div在宽屏设备下水平居中 */
}

原理解释 #

• 当设备视口宽度大于等于550px时，width: 550px生效，div宽度固定为550px
• 当设备视口宽度小于550px时，max-width: 100%优先级高于固定宽度，div会自动收缩到和视口可用宽度一致，不会超出屏幕产生横向滚动条

必要前置检查 #

确保页面<head>标签中已经添加了移动端适配的视口元标签，否则移动端浏览器会默认使用虚拟视口渲染，适配规则不会生效：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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