基础框架屏幕兼容性问题答案

【问题标题】：Foundation Framework Screen Compatibility Issues基础框架屏幕兼容性问题
【发布时间】：2014-09-25 20:57:59
【问题描述】：

我使用 Zurb Foundation 框架在具有 1366 x 768 32 位屏幕分辨率的 HP Envy X2 PC 笔记本电脑上创建了一个网站。我的代码在具有较大屏幕的计算机上打开时工作正常，但是当我在较小的上网本屏幕上尝试我的网站时，主要内容（不包括横幅和页脚）被挤压。挤压，我的意思是，不是将屏幕内容分成 3 个整齐的列，而是将文字和图像设置在垂直显示中，每个都放在前面的下方。

我的印象是，Zurb Foundation Framework 旨在适用于所有大小的设备。我错了吗？

除了更改我的 html {background-image} 和 a:hover {color} 之外，我没有触及 CSS，所以我很好奇它在较小的屏幕分辨率上会如何失败。

我尝试了 Zurb 基金会论坛，但那个地方已经死了，只是充满了飘来飘去永远无法回答的问题。

如果有人知道我为什么会遇到小屏幕问题，我将不胜感激。

【问题讨论】：

标签： css frameworks screen compatibility

【解决方案1】：

您遇到的问题是设计使然。查看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-* 类添加到您的列中。

编辑

这是一个显示差异的sn-p

<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>

【讨论】：