我使用 Zurb Foundation Framework 在屏幕分辨率为 1366 x 768 32 位的 HP Envy X2 PC 笔记本电脑上创建了一个网站。我的代码在屏幕较大的计算机上打开时工作正常，但当我在较小的上网本屏幕上尝试我的网站时，主要内容(不包括横幅和页脚)被压扁了。所谓压扁，我的意思是不是将内容以 3 个整齐的列横跨屏幕，而是将文字和图像设置为垂直显示，每一个都放在前一个的下方。
我的印象是 Zurb Foundation Framework 设计用于所有设备，无论大小。我错了吗？
除了更改我的 html {background-image} 和 a:hover {color} 之外，我没有接触 CSS，所以我很好奇它在较小的屏幕分辨率下会如何失败。
我试过 Zurb Foundation 论坛，但那个地方死气沉沉，充斥着永远无法回答的问题。
如果有人知道为什么我会遇到较小的屏幕问题，我将不胜感激。
最佳答案
您遇到的问题是设计使然。查看 Foundation Grid 的文档我们看到有些类告诉网格如何响应特定的屏幕尺寸 .small-*, .medium-*, .large-*(其中 * 是元素应跨越的单元格数)。
按照这个约定，如果我们想要在大屏幕和小屏幕上显示 3 列，我们需要的标记如下所示:
<div class="row">
<div class="columns small-4 large-4 panel">
<h3>One</h3>
</div>
<div class="columns small-4 large-4 panel">
<h3>Two</h3>
</div>
<div class="columns small-4 large-4 panel">
<h3>Three</h3>
</div>
</div>
指定类 small-* 确保当屏幕“小”时列将符合指定的大小。
简而言之，如果您希望它们在较小的屏幕尺寸上遵守特定宽度，请确保将类 .small-* 添加到您的列中。
编辑
这是一个显示差异的片段
<html>
<head>
<title>Foundation Grid</title>
<link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet" />
</head>
<body>
<h1>Without ".small-"</h1>
<div class="row">
<div class="columns large-4 panel">
<h3>One</h3>
</div>
<div class="columns large-4 panel">
<h3>Two</h3>
</div>
<div class="columns large-4 panel">
<h3>Three</h3>
</div>
</div>
<h1>With ".small-"</h1>
<div class="row">
<div class="columns small-4 large-4 panel">
<h3>One</h3>
</div>
<div class="columns small-4 large-4 panel">
<h3>Two</h3>
</div>
<div class="columns small-4 large-4 panel">
<h3>Three</h3>
</div>
</div>
</body>
</html>关于css - Foundation Framework 屏幕兼容性问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26047986/