屏幕宽度低于300px时图片尺寸不缩小？如何实现网页响应式适配？

核心问题原因 #

• 缺失移动端适配必须的viewport元标签，导致浏览器默认按桌面宽度渲染页面，你之前使用clamp设置宽度没有效果也是这个原因：未设置viewport时vw等相对单位是基于虚拟桌面视口计算的，不会适配小屏
• 未全局设置border-box盒模型，元素的padding、border会额外增加总宽度导致溢出
• 大尺寸字体、固定内边距在小屏下没有适配，导致内容超出视口
• 部分元素宽度计算未考虑父容器的内边距，触发水平溢出

具体修改步骤 #

1. 添加viewport元标签 #

在你的HTML文件<head>标签内添加以下代码，让移动端浏览器按设备实际宽度渲染：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. 全局设置盒模型 #

在CSS最开头添加全局盒模型规则，统一元素宽度计算逻辑：

* {
  box-sizing: border-box;
}

你现有代码仅给input设置了box-sizing: border-box，其他元素还是默认的content-box，padding和border会撑大元素总宽度，是溢出的主要原因之一。

3. 适配小屏下的字体和内边距 #

在现有媒体查询@media screen and (max-width:1020px)里新增以下规则，调整小屏内容尺寸：

.hero {
  padding: 1em 0.5em;
  gap: 2em;
}
.hero h2 {
  font-size: clamp(2em, 7vw, 3em);
}
.navbar {
  padding-right: 120px; /* 避免logo和右侧菜单按钮重叠 */
}

4. 修正元素宽度逻辑 #

给section标签新增box-sizing规则，避免border撑大宽度：

section {
  border-bottom: 2px solid #b6fd92;
  width: 100%;
  box-sizing: border-box;
}

验证效果 #

修改完成后小屏端不会再出现水平溢出，元素会自动居中排列，汉堡菜单功能正常可用。

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