Question

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

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

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

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

如果有人知道为什么我会遇到更小的屏幕问题，我会很感激任何答案。

Answer 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-*可确保当屏幕为＆＃34;小＆＃34;时，列将符合指定的大小。

简而言之，如果您希望它们在较小的屏幕尺寸上遵循特定的宽度，请确保将类.small-*添加到列中。

修改

以下是显示差异的片段

＆＃13;
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Foundation Framework屏幕兼容性问题

1 个答案: