如何使 Zurb 基金会无响应？答案

【问题标题】：how to make Zurb Foundation non-responsive?如何使 Zurb 基金会无响应？
【发布时间】：2022-02-03 20:57:03
【问题描述】：

我用 Foundation-master wordpress 主题制作了一个网站，它看起来不错，但我不喜欢它在其他浏览器宽度下的表现。有没有办法让它不响应，或者固定到一定的宽度？

谢谢！

【问题讨论】：

【解决方案1】：

有时需要停用响应式功能。例如，如果像我已经发生过两次一样，网站启动时没有响应，并且稍后会添加针对智能手机/平板电脑的优化。

Foundation 是一个很棒的框架，即使你去掉了响应能力。 SCSS 文件的结构非常好，它带有一个非常有用的 UI 元素库。如果您问我，这是响应式和非响应式网站的绝佳选择。有些人可能还希望简化他们的工作流程，而不是根据项目在不同框架之间跳转以保持低成本。

无论如何，这是我的两分钱。这对我来说停用了所有响应：

.row {  
     width: 62.5rem;
}

然后在_settings.scss中

$small-range: (0, 90em);
$medium-range: (0, 90em);
$large-range: (0, 90em);

这样，我们基本上总是看到大版本。据我所知，这甚至适用于顶栏等。

【讨论】：

【解决方案2】：

Foundation 旨在简单地创建响应式网站。除了如果您不想要响应式网站为什么要使用此框架的问题之外，只有在您开始删除基础 CSS 中的所有媒体查询并删除视口元标记时才有可能。

也许您最好花时间让您的网站具有响应性，使其也适合较小的屏幕和移动设备。

【讨论】：

【解决方案3】：

虽然问题被标记为已回答，但我只是想给你一个快速提示，以防止 Foundation 4 网格响应，因为我们也必须处理这个问题。

在我们的例子（SASS 版本）中，通过 css 将 <body> 元素的宽度设置为网格的特定宽度，并将 SASS 变量 $small-screen 中的断点减少到 1px 工作正常。

【讨论】：

【解决方案4】：

尝试在 body 属性中添加 min-width，如下所示：

html,
body {
  font-size: 100%; 
  min-width: <value A>;
  max-width: <value A>;
  width: 100%;
}

（基础.css）

【讨论】：