本文详解因 HTML 语法错误（如 href="tel+" 缺失闭合引号）导致媒体查询失效的典型问题，并提供健壮、响应式的页脚实现方案，包含语义化结构、Flex 布局优化与移动端适配技巧。
本文详解因 html 语法错误（如 `href="tel+"` 缺失闭合引号）导致媒体查询失效的典型问题，并提供健壮、响应式的页脚实现方案，包含语义化结构、flex 布局优化与移动端适配技巧。
在实际开发中，当 .Footer 的 @media 规则看似“不生效”时，往往并非 CSS 逻辑错误，而是 HTML 结构存在未闭合的标签或属性值语法错误——这类错误会破坏整个 DOM 解析，导致后续样式（包括媒体查询）被浏览器忽略或部分失效。
你代码中的关键问题就藏在这里：
<i class="fa-solid fa-phone"></i><a href="tel+> Phone number </a>
href="tel+> 缺少结束双引号（应为 href="tel:+1234567890"），且 tel+ 本身格式非法（缺少号码）。该错误会使浏览器在解析 HTML 时提前截断或错误嵌套，进而导致 <div class="Footer"> 及其子元素未被正确识别为有效 DOM 节点——此时即使 CSS 写得再规范，也无法作用于一个“不存在”的元素。
✅ 第一步：修复 HTML 语法错误
确保所有属性值用引号包裹，tel 链接需符合标准格式（tel:+[国家码][号码]）：
<div class="Footer">
<section>
<h3>Contact Us</h3>
<p><i class="fa-solid fa-location-dot"></i> <a href="https://maps.google.com/?q=your+address">123 Main St, City, State</a></p>
</section>
<section>
<h3>Hours</h3>
<p>Monday–Friday: 8am–5pm<br>Saturday: 8am–1pm<br>Sunday: Closed</p>
</section>
<section>
<h3>Follow Us</h3>
<p>
<a href="https://www.facebook.com/">Facebook</a> •
<a href="https://www.instagram.com/">Instagram</a> •
<a href="https://www.youtube.com/">YouTube</a>
</p>
</section>
</div>✅ 第二步：重构 CSS，增强响应性与可维护性
避免硬编码 width: calc(33.33% - 20px) 和冗余 display: block（<section> 默认为块级），改用现代 Flex 布局 + flex-basis 控制断点：
.Footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: #000;
color: #fff;
padding: 24px 16px;
gap: 24px; /* 替代 margin，更可控 */
}
.Footer > section {
flex: 1 1 280px; /* 最小宽度 280px，允许伸缩 */
text-align: center;
}
.Footer h3 {
margin: 0 0 12px 0;
font-size: 1.1rem;
color: #977847;
}
.Footer a {
color: #fff;
text-decoration: none;
transition: color 0.3s ease;
}
.Footer a:hover {
color: #977847;
}
.Footer i {
margin-right: 6px;
color: #977847;
}
/* 移动端：堆叠为单列，精简间距 */
@media screen and (max-width: 768px) {
.Footer {
flex-direction: column;
text-align: center;
}
.Footer > section {
flex-basis: 100%;
}
.Footer p {
margin: 8px 0;
}
}⚠️ 注意事项
立即学习“前端免费学习笔记（深入）”；
- 验证 HTML 有效性：使用 W3C Markup Validator 检查语法错误，这是排查响应式失效的第一步；
- 媒体查询位置无关紧要：只要 CSS 文件被正确加载，@media 规则无需放在末尾，但需确保无更高优先级的选择器覆盖它；
- 避免 display: none 过早隐藏：除非设计需求，否则优先用 flex-direction: column 或 grid 重构布局，而非直接隐藏——这对 SEO 和无障碍访问更友好；
- 图标字体兼容性：确保 Font Awesome CSS 已正确引入（<link> 标签置于 <head> 中），否则 <i> 元素可能渲染为空白。
通过修复基础语法 + 采用语义化 HTML + 现代 CSS 布局策略，你的页脚不仅能可靠响应不同屏幕尺寸，还能提升可访问性与长期可维护性。记住：响应式失效，90% 源于结构问题，而非样式本身。
