Css 基础框架屏幕兼容性问题 我使用Zurb基金会框架在HP嫉妒X2 PC笔记本上创建一个网站，具有1366×768×32位屏幕分辨率。我的代码在大屏幕的电脑上打开时可以正常工作，但当我在小屏幕的上网本上尝试我的网站时，除了横幅和页脚以外的主要内容都被压扁了。通过挤压，我的意思是，屏幕上的内容不是以3列整齐排列，而是将文字和图像设置为垂直显示，每个文字和图像都放在前面的文字和图像的下方 我的印象是ZURB基金会框架被设计用于所有的设备，无论大小。我错了

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

我试过Zurb基金会论坛，但是那个地方死了，只是到处都是问题，到处都找不到答案。 如果有人知道我为什么会遇到小屏幕问题，我将非常感谢任何答案

您所遇到的问题都是设计出来的。查看文档，我们看到有一些类告诉网格如何响应特定的屏幕大小。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>