Foundation 6中Small断点失效，始终显示Medium断点问题求助

刚从Bootstrap 4切换到Foundation 6确实容易碰到断点相关的坑，毕竟两者的响应式逻辑细节有差异。针对你遇到的Small断点完全不生效、320px宽度下仍显示Medium样式的问题，我整理了几个最可能的原因和解决办法：

1. 忘了设置视口（Viewport）Meta标签 #

这是最容易忽略的关键点！Foundation的响应式布局完全依赖正确的视口设置，如果没加下面这段代码，移动端浏览器会自动放大页面，导致320px的设备实际渲染的视口宽度远大于Small断点的上限（默认639px），自然就触发了Medium样式。

赶紧在<head>里加上：

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

2. 响应式类名写法错误 #

Foundation的响应式类名和Bootstrap有细微差别：

• Bootstrap用缩写：col-sm-*、text-sm-center
• Foundation用完整单词：small-*、small-text-center

如果你的代码里不小心用了sm-代替small-，那Small断点的样式肯定不会生效。比如要让文本在Small和Medium下都居中，应该写：

<h1 class="small-text-center medium-text-center">{{ entry.title }}</h1>

另外，Foundation的网格布局需要配合grid-x、cell这些类使用，如果你直接套用Bootstrap的col-*逻辑，也会导致断点不生效。比如正确的网格结构应该是：

<div class="grid-x grid-padding-x">
  <div class="small-12 medium-8 medium-offset-2 cell">
    <p class="text-center">...的内容</p>
  </div>
</div>

3. Foundation CSS引入不完整或断点配置被修改 #

• 如果你是手动构建Foundation，要确认在配置文件里没有误改Small断点的范围。Foundation默认的断点是：
  • Small: 0px 到 639px
  • Medium: 640px 及以上
    如果把Small的上限改成了640px，那320px自然会被归到Medium范围。
• 如果你用的是CDN引入，要确保引入的是完整的foundation.min.css，而不是只引入了某个组件的CSS。

4. 自定义CSS冲突 #

检查你自己写的CSS代码，有没有以下情况：

• 用了优先级更高的选择器（比如ID选择器、内嵌样式）覆盖了Foundation的断点样式
• 误写了媒体查询，比如@media screen and (min-width: 0px)这样的规则，把Medium的样式强制应用到了所有宽度
• 滥用!important导致Foundation的响应式样式被覆盖

排查小技巧 #

打开浏览器开发者工具（F12）：

1. 切换到移动端视图，把宽度调到320px
2. 选中不生效的元素，查看“样式”面板，看看Medium断点的媒体查询（比如@media screen and (min-width: 640px)）是不是被错误地激活了
3. 检查视口宽度的实际值（在开发者工具的顶部状态栏能看到），如果实际值远大于320px，说明视口标签没起作用

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